Prompt user to resume when reconnecting with the same Prolific ID

frontend/src/components/participant_view/cohort_landing.scss

@@ -1,6 +1,6 @@
-@use "../../sass/colors";
-@use "../../sass/common";
-@use "../../sass/typescale";
+@use '../../sass/colors';
+@use '../../sass/common';
+@use '../../sass/typescale';
 
 :host {
   @include common.flex-column;
@@ -31,4 +31,11 @@ h1 {
 .action-buttons {
   @include common.flex-row;
   justify-content: center;
-}
+}
+
+.resume-dialog-buttons {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-top: 12px;
+}

frontend/src/components/participant_view/cohort_landing.ts

@@ -9,11 +9,9 @@ import {AnalyticsService, ButtonClick} from '../../services/analytics.service';
 import {ExperimentService} from '../../services/experiment.service';
 import {FirebaseService} from '../../services/firebase.service';
 import {Pages, RouterService} from '../../services/router.service';
+import {ExperimentManager} from '../../services/experiment.manager';
 
-import {StageKind} from '@deliberation-lab/utils';
-
-import {createParticipantCallable} from '../../shared/callables';
-import {requiresAnonymousProfiles} from '../../shared/participant.utils';
+import {bootParticipantCallable} from '../../shared/callables';
 
 import {styles} from './cohort_landing.scss';
 
@@ -28,6 +26,8 @@ export class CohortLanding extends MobxLitElement {
   private readonly routerService = core.getService(RouterService);
 
   @state() isLoading = false;
+  @state() showResumeDialog = false;
+  @state() resumeParticipantId: string = '';
 
   override render() {
     const isLockedCohort = () => {
@@ -56,12 +56,30 @@ export class CohortLanding extends MobxLitElement {
         <div class="action-buttons">
           <pr-button
             ?loading=${this.isLoading}
-            ?disabled=${isLockedCohort()}
+            ?disabled=${isLockedCohort() ||
+            this.isLoading ||
+            this.showResumeDialog}
             @click=${this.joinExperiment}
           >
             Join experiment
           </pr-button>
         </div>
+        ${this.showResumeDialog
+          ? html`<div class="resume-dialog">
+              <div>
+                A previous session was found for your Prolific ID.<br />
+                Would you like to resume your previous session or start over?
+              </div>
+              <div class="resume-dialog-buttons">
+                <pr-button @click=${this.handleResume}>Resume</pr-button>
+                <pr-button
+                  @click=${this.handleStartOver}
+                  .loading=${this.isLoading}
+                  >Start Over</pr-button
+                >
+              </div>
+            </div>`
+          : nothing}
       </div>
     `;
   }
@@ -71,14 +89,11 @@ export class CohortLanding extends MobxLitElement {
     this.analyticsService.trackButtonClick(ButtonClick.PARTICIPANT_JOIN);
 
     const params = this.routerService.activeRoute.params;
-    const isAnonymous = requiresAnonymousProfiles(
-      this.experimentService.stages,
-    );
 
     const prolificIdMatch = window.location.href.match(
       /[?&]PROLIFIC_PID=([^&]+)/,
     );
-    const prolificId = prolificIdMatch ? prolificIdMatch[1] : null;
+    const prolificId = prolificIdMatch ? prolificIdMatch[1] : undefined;
     if (
       this.experimentService.experiment!.prolificConfig!
         .enableProlificIntegration &&
@@ -89,22 +104,63 @@ export class CohortLanding extends MobxLitElement {
       );
     }
 
-    const response = await createParticipantCallable(
-      this.firebaseService.functions,
-      {
-        experimentId: params['experiment'],
-        cohortId: params['cohort'],
-        isAnonymous,
-        prolificId,
-      },
-    );
+    // Use ExperimentManager's createParticipant
+    const response = await core
+      .getService(ExperimentManager)
+      .createParticipant(params['cohort'], prolificId);
+
+    if (response.exists && response.participant) {
+      // Existing participant found, show dialog
+      this.resumeParticipantId = response.participant.privateId || '';
+      this.showResumeDialog = true;
+      this.isLoading = false;
+      return;
+    }
+
+    // New participant created
+    this.routerService.navigate(Pages.PARTICIPANT, {
+      experiment: params['experiment'],
+      participant: response.id!,
+    });
+    this.isLoading = false;
+  }
 
-    // Route to participant page
+  private async handleResume() {
+    // Resume with existing participant
+    const params = this.routerService.activeRoute.params;
+    this.routerService.navigate(Pages.PARTICIPANT, {
+      experiment: params['experiment'],
+      participant: this.resumeParticipantId!,
+    });
+    this.showResumeDialog = false;
+  }
+
+  private async handleStartOver() {
+    // Boot old participant, then create new one
+    this.isLoading = true;
+    const params = this.routerService.activeRoute.params;
+    await bootParticipantCallable(this.firebaseService.functions, {
+      experimentId: params['experiment'],
+      participantId: this.resumeParticipantId!,
+    });
+    // Create new participant (forceNew)
+    const prolificIdMatch = window.location.href.match(
+      /[?&]PROLIFIC_PID=([^&]+)/,
+    );
+    const prolificId = prolificIdMatch ? prolificIdMatch[1] : undefined;
+    const response = await core.getService(ExperimentManager).createParticipant(
+      params['cohort'],
+      prolificId,
+      true, // forceNew
+    );
     this.routerService.navigate(Pages.PARTICIPANT, {
       experiment: params['experiment'],
-      participant: response.id,
+      participant: response.participant
+        ? response.participant.privateId!
+        : response.id!,
     });
     this.isLoading = false;
+    this.showResumeDialog = false;
   }
 }
 

frontend/src/services/experiment.manager.ts

@@ -1,11 +1,8 @@
 import {computed, makeObservable, observable} from 'mobx';
 import {
   collection,
-  doc,
-  getDocs,
   onSnapshot,
   query,
-  Timestamp,
   Unsubscribe,
   where,
 } from 'firebase/firestore';
@@ -22,7 +19,6 @@ import {Service} from './service';
 import JSZip from 'jszip';
 
 import {
-  DEFAULT_AGENT_MODEL_SETTINGS,
   AlertMessage,
   AlertStatus,
   AgentPersonaConfig,
@@ -32,8 +28,6 @@ import {
   CohortConfig,
   CohortParticipantConfig,
   CreateChatMessageData,
-  Experiment,
-  ExperimentDownload,
   MediatorProfile,
   MetadataConfig,
   ParticipantProfileExtended,
@@ -50,6 +44,7 @@ import {
   createChatMessageCallable,
   createCohortCallable,
   createParticipantCallable,
+  checkOrCreateParticipantCallable,
   deleteCohortCallable,
   deleteExperimentCallable,
   initiateParticipantTransferCallable,
@@ -65,8 +60,6 @@ import {
   hasMaxParticipantsInCohort,
 } from '../shared/cohort.utils';
 import {
-  downloadCSV,
-  downloadJSON,
   getChatHistoryData,
   getChipNegotiationCSV,
   getChipNegotiationData,
@@ -703,21 +696,35 @@ export class ExperimentManager extends Service {
   }
 
   /** Create human participant. */
-  async createParticipant(cohortId: string) {
+  async createParticipant(
+    cohortId: string,
+    prolificId?: string,
+    forceNew?: boolean,
+  ): Promise<{
+    exists?: boolean;
+    participant?: ParticipantProfileExtended;
+    id?: string;
+  }> {
     this.isWritingParticipant = true;
-    let response = {};
+    let response: {
+      exists?: boolean;
+      participant?: ParticipantProfileExtended;
+      id?: string;
+    } = {};
 
     if (this.experimentId) {
       const isAnonymous = requiresAnonymousProfiles(
         this.sp.experimentService.stages,
       );
 
-      response = await createParticipantCallable(
+      response = await checkOrCreateParticipantCallable(
         this.sp.firebaseService.functions,
         {
           experimentId: this.experimentId,
           cohortId,
           isAnonymous,
+          prolificId: prolificId || undefined,
+          forceNew: forceNew || false,
         },
       );
     }

frontend/src/shared/callables.ts

@@ -11,10 +11,8 @@ import {
   ExperimentCohortLockData,
   ExperimentCreationData,
   ExperimentDeletionData,
-  ExperimentDownloadResponse,
   InitiateParticipantTransferData,
   ParticipantNextStageResponse,
-  ParticipantProfile,
   SendAlertMessageData,
   SendChipOfferData,
   SendChipResponseData,
@@ -137,6 +135,18 @@ export const createParticipantCallable = async (
   return data;
 };
 
+/** Generic endpoint to check or create participant. */
+export const checkOrCreateParticipantCallable = async (
+  functions: Functions,
+  config: CreateParticipantData,
+) => {
+  const {data} = await httpsCallable<CreateParticipantData, CreationResponse>(
+    functions,
+    'checkOrCreateParticipant',
+  )(config);
+  return data;
+};
+
 /** Generic endpoint to update participant's TOS response */
 export const updateParticipantAcceptedTOSCallable = async (
   functions: Functions,