diff --git a/public/index.html b/public/index.html index 6ee9956..8f7e9cc 100755 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,11 @@ + <% if (process.env.OPTIMIZELY_PROJECT_ID) { %> + + <% } %>
diff --git a/src/id-verification/IdVerificationContextProvider.jsx b/src/id-verification/IdVerificationContextProvider.jsx index ad6ddc0..fb6ab52 100644 --- a/src/id-verification/IdVerificationContextProvider.jsx +++ b/src/id-verification/IdVerificationContextProvider.jsx @@ -20,6 +20,7 @@ export default function IdVerificationContextProvider({ children }) { const [canVerify, setCanVerify] = useState(true); const [error, setError] = useState(''); const { authenticatedUser } = useContext(AppContext); + const [optimizelyExperimentName, setOptimizelyExperimentName] = useState(''); const contextValue = { existingIdVerification, @@ -30,10 +31,12 @@ export default function IdVerificationContextProvider({ children }) { mediaAccess, userId: authenticatedUser.userId, nameOnAccount: authenticatedUser.name, + optimizelyExperimentName, setExistingIdVerification, setFacePhotoFile, setIdPhotoFile, setIdPhotoName, + setOptimizelyExperimentName, tryGetUserMedia: async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); diff --git a/src/id-verification/data/service.js b/src/id-verification/data/service.js index 851ed8a..8997af2 100644 --- a/src/id-verification/data/service.js +++ b/src/id-verification/data/service.js @@ -64,6 +64,7 @@ export async function submitIdVerification(verificationData) { facePhotoFile: 'face_image', idPhotoFile: 'photo_id_image', idPhotoName: 'full_name', + optimizelyExperimentName: 'experiment_name', }; const postData = {}; // Don't include blank/null/undefined values. diff --git a/src/id-verification/panels/ReviewRequirementsPanel.jsx b/src/id-verification/panels/ReviewRequirementsPanel.jsx index 26d72f0..a7139c1 100644 --- a/src/id-verification/panels/ReviewRequirementsPanel.jsx +++ b/src/id-verification/panels/ReviewRequirementsPanel.jsx @@ -11,15 +11,29 @@ import messages from '../IdVerification.messages'; import exampleCard from '../assets/example-card.png'; function ReviewRequirementsPanel(props) { - const { userId } = useContext(IdVerificationContext); + const { userId, setOptimizelyExperimentName } = useContext(IdVerificationContext); const panelSlug = 'review-requirements'; const nextPanelSlug = useNextPanelSlug(panelSlug); + const getExperiments = () => { + const { + experimentVariables: { + experimentName = '', + } = {}, + } = window; + + if (experimentName) { + setOptimizelyExperimentName(experimentName); + } + }; + useEffect(() => { sendTrackEvent('edx.id_verification.started', { category: 'id_verification', user_id: userId, }); + + getExperiments(); }, [userId]); return ( diff --git a/src/id-verification/panels/SummaryPanel.jsx b/src/id-verification/panels/SummaryPanel.jsx index b529692..92e1eb9 100644 --- a/src/id-verification/panels/SummaryPanel.jsx +++ b/src/id-verification/panels/SummaryPanel.jsx @@ -24,6 +24,7 @@ function SummaryPanel(props) { nameOnAccount, idPhotoName, stopUserMedia, + optimizelyExperimentName, } = useContext(IdVerificationContext); const nameToBeUsed = idPhotoName || nameOnAccount || ''; const [isSubmitting, setIsSubmitting] = useState(false); @@ -32,12 +33,15 @@ function SummaryPanel(props) { function SubmitButton() { async function handleClick() { setIsSubmitting(true); - const verificationData = { + let verificationData = { facePhotoFile, idPhotoFile, idPhotoName: nameToBeUsed, courseRunKey: sessionStorage.getItem('courseRunKey'), }; + if (optimizelyExperimentName) { + verificationData = { ...verificationData, optimizelyExperimentName }; + } const result = await submitIdVerification(verificationData); if (result.success) { stopUserMedia(); diff --git a/src/id-verification/tests/panels/ReviewRequirementsPanel.test.jsx b/src/id-verification/tests/panels/ReviewRequirementsPanel.test.jsx index 13323ae..30307e1 100644 --- a/src/id-verification/tests/panels/ReviewRequirementsPanel.test.jsx +++ b/src/id-verification/tests/panels/ReviewRequirementsPanel.test.jsx @@ -6,6 +6,7 @@ import { } from '@testing-library/react'; import '@edx/frontend-platform/analytics'; import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n'; +import IdVerificationContext from '../../IdVerificationContext'; import ReviewRequirementsPanel from '../../panels/ReviewRequirementsPanel'; jest.mock('@edx/frontend-platform/analytics', () => ({ @@ -21,6 +22,8 @@ describe('ReviewRequirementsPanel', () => { intl: {}, }; + const context = { setOptimizelyExperimentName: jest.fn() }; + afterEach(() => { cleanup(); }); @@ -37,4 +40,19 @@ describe('ReviewRequirementsPanel', () => { fireEvent.click(button); expect(history.location.pathname).toEqual('/request-camera-access'); }); + + it('updates optimizely experiment name in context', async () => { + window.experimentVariables = {}; + window.experimentVariables.experimentName = 'test-experiment'; + await act(async () => render(( + + + + + + + + ))); + expect(context.setOptimizelyExperimentName).toHaveBeenCalledWith('test-experiment'); + }); }); diff --git a/src/id-verification/tests/panels/SummaryPanel.test.jsx b/src/id-verification/tests/panels/SummaryPanel.test.jsx index bbc2e9d..c77c895 100644 --- a/src/id-verification/tests/panels/SummaryPanel.test.jsx +++ b/src/id-verification/tests/panels/SummaryPanel.test.jsx @@ -30,8 +30,9 @@ describe('SummaryPanel', () => { const contextValue = { facePhotoFile: 'test.jpg', idPhotoFile: 'test.jpg', - nameOnAccount: '', - idPhotoName: '', + nameOnAccount: 'test name', + idPhotoName: 'test name', + optimizelyExperimentName: 'test-experiment', stopUserMedia: jest.fn(), }; @@ -76,10 +77,17 @@ describe('SummaryPanel', () => { }); it('submits', async () => { + const verificationData = { + facePhotoFile: contextValue.facePhotoFile, + idPhotoFile: contextValue.idPhotoFile, + idPhotoName: contextValue.idPhotoName, + optimizelyExperimentName: contextValue.optimizelyExperimentName, + courseRunKey: null, + }; await getPanel(); const button = await screen.findByTestId('submit-button'); fireEvent.click(button); - expect(dataService.submitIdVerification).toHaveBeenCalled(); + expect(dataService.submitIdVerification).toHaveBeenCalledWith(verificationData); await waitFor(() => expect(contextValue.stopUserMedia).toHaveBeenCalled()); });