Membership Registration

/membership/register/:membershipPeriodId

https://app.example.com/membership/register/42?u=abc123xyz&h=5d41402abc4b2a76b9719d911017c592

export const membershipGuard: CanActivateFn = (route: ActivatedRouteSnapshot) => {
  const router = inject(Router);
  const membershipPeriodId = route.paramMap.get('membershipPeriodId');
  const pathUserKey = route.paramMap.get('u');
  const queryUserKey = route.queryParamMap.get('u');
  const userKey = pathUserKey || queryUserKey;
  const providedHash = route.queryParamMap.get('h');
  const requiresHash = route.data['requiresHash'];

  // Both userKey and hash must be present
  if (!userKey || !providedHash) {
    router.navigate(['/membership/register', membershipPeriodId], {
      queryParams: { error: 'Missing security verification parameters' }
    });
    return false;
  }

  // Verify hash
  const expectedHash = Md5.hashStr(SECRET_KEY + userKey);
  if (expectedHash !== providedHash) {
    router.navigate(['/membership/register', membershipPeriodId], {
      queryParams: { error: 'Invalid security verification' }
    });
    return false;
  }

  return true;
};

private loadMembership(): void {
  this.loading = true;
  this.formService
    .getFormMembership(this.membershipPeriodId, this.userKey)
    .pipe(
      tap(formState => {
        this.formDTO = formState;
        this.linkedPersons = formState.people
          ? Array.from(formState.people)
          : [];
        this.processId = formState.processId;

        // Set selected persons based on API response
        this.selectedPersons = this.linkedPersons
          .filter(person => person.selected);

        if (formState.processState === ProcessInstanceDTO.StatusEnum.Running ||
            formState.processState === ProcessInstanceDTO.StatusEnum.Resume) {
          this.showProcessDialog();
        }
      }),
      takeUntil(this.destroy$),
      finalize(() => (this.loading = false))
    )
    .subscribe();
}

{
  "processId": "proc-123",
  "step": 1,
  "processState": "NONE",
  "people": [
    {
      "id": 1,
      "firstName": "John",
      "lastName": "Smith",
      "dateOfBirth": "1985-03-15",
      "status": "Available",
      "canSelect": true,
      "selected": false
    },
    {
      "id": 2,
      "firstName": "Jane",
      "lastName": "Smith",
      "dateOfBirth": "1987-07-20",
      "status": "Available",
      "canSelect": true,
      "selected": false
    },
    {
      "id": 3,
      "firstName": "Billy",
      "lastName": "Smith",
      "dateOfBirth": "2010-11-03",
      "status": "Available",
      "canSelect": true,
      "selected": false
    }
  ]
}

toggleSelection(person: FormPersonDTO): void {
  // Only allow selection if canSelect is true
  if (!person.canSelect) {
    return;
  }

  if (this.isSelected(person)) {
    this.selectedPersons = this.selectedPersons.filter(p => p.id !== person.id);
    person.selected = false;
  } else {
    this.selectedPersons.push(person);
    person.selected = true;
  }
}

showProcessDialog(): void {
  this.sharedDialogService
    .show({
      header: 'Existing Registration',
      message: 'A previous registration attempt has been detected. ' +
               'Would you like to continue with that, or start fresh?',
      buttons: [
        {
          label: 'Start Fresh',
          action: ProcessAction.RESET,
          class: 'p-button-success',
        },
        {
          label: 'Resume',
          action: ProcessAction.RESUME,
          class: 'p-button-primary',
        },
      ],
    })
    .pipe(takeUntil(this.destroy$))
    .subscribe(result => {
      if (result === ProcessAction.RESET || result === ProcessAction.RESUME) {
        this.handleProcessAction(result as ProcessAction);
      }
    });
}

handleProcessAction(action: ProcessAction): void {
  if (!this.formDTO) return;

  this.formService[action === ProcessAction.RESET ? 'reset' : 'resume'](
    this.formDTO.processId
  )
    .pipe(takeUntil(this.destroy$))
    .subscribe(_formDTO => {
      if (_formDTO.processState === ProcessInstanceDTO.StatusEnum.Running ||
          _formDTO.processState === ProcessInstanceDTO.StatusEnum.Resume) {
        this.updateFormWithData(_formDTO);
      }
    });
}

register(): void {
  this.loading = true;
  const selectedPersonsDTO = this.linkedPersons
    .filter(person => person.selected)
    .map(person => ({ id: person.id }) as FormPersonDTO);

  this.formService
    .next({
      processId: this.processId,
      step: this.formDTO.step,
      people: selectedPersonsDTO,
    })
    .pipe(
      tap(response => this.handleNextFormResponse(response)),
      takeUntil(this.destroy$),
      finalize(() => {
        this.loading = false;
      })
    )
    .subscribe({
      next: () => {
        this.showQuestionBox = true;
      },
      error: error => {
        this.showQuestionBox = false;
        this.handleError(error);
      }
    });
}

{
  "processId": "proc-123",
  "step": 1,
  "people": [
    { "id": 1 },
    { "id": 3 }
  ]
}

{
  "processId": "proc-123",
  "step": 2,
  "processState": "RUNNING",
  "question": "Does anyone have any medical conditions?",
  "questionType": "BCB",
  "required": true,
  "options": null,
  "people": [
    {
      "id": 1,
      "firstName": "John",
      "lastName": "Smith",
      "answer": null,
      "hide": false
    },
    {
      "id": 3,
      "firstName": "Billy",
      "lastName": "Smith",
      "answer": null,
      "hide": false
    }
  ],
  "paymentUrl": null
}

next() {
  this.loading = true;
  this.selectedPeople = this.people.map(_person => ({
    answer: _person.answer || '0',
    id: _person.id,
  }));

  this.formService
    .next({
      processId: this.questionData.processId,
      step: this.questionData.step,
      people: this.selectedPeople,
    })
    .pipe(finalize(() => (this.loading = false)))
    .subscribe(_response => {
      this.questionData = _response;
      this.people = Array.from(this.questionData?.people || [])
        .map(p => ({
          ...p,
          answer: p.answer || '',
        })) || [];
    });
}

{
  "processId": "proc-123",
  "step": 2,
  "people": [
    { "id": 1, "answer": "0" },
    { "id": 3, "answer": "1" }
  ]
}

isValid(): boolean {
  if (!this.questionData.required) {
    return true;
  }

  if (this.questionData.questionType === 'ITC') {
    // For ITC (Terms), all people must have answer '1' (checked)
    return this.people.every(person => person.answer === '1');
  }

  return this.people.every(person => {
    if (person.hide) {
      return true;
    }

    if (this.questionData.questionType === 'BCB') {
      return true; // Binary checkboxes are always valid
    }

    if (this.questionData.questionType === 'ONE') {
      // For required ONE type, at least one person should have answer '1'
      return this.people.some(p => p.answer === '1');
    }

    return person.answer !== null &&
           person.answer !== undefined &&
           person.answer !== '';
  });
}

handleMasterCheckbox(checked: boolean): void {
  // Update all people's answers when master checkbox changes
  this.people.forEach(person => {
    person.answer = checked ? '1' : '0';
  });
}

<div *ngIf="questionData.questionType === 'ITC'">
  <p-checkbox
    [(ngModel)]="masterCheckbox"
    (onChange)="handleMasterCheckbox(masterCheckbox)"
    [binary]="true"
    label="Accept for all members">
  </p-checkbox>

  <div *ngFor="let person of people">
    <p-checkbox
      [(ngModel)]="person.answer"
      [binary]="true"
      [label]="person.firstName + ' ' + person.lastName">
    </p-checkbox>
  </div>
</div>

pay() {
  if (this.questionData.paymentUrl) {
    this.messageService.add({
      severity: 'info',
      summary: 'Payment Portal',
      detail: 'Redirecting to payment portal...',
      sticky: true,
      life: 5000,
    });

    setTimeout(() => {
      if (this.questionData.paymentUrl) {
        window.location.href = this.questionData.paymentUrl;
      }
    }, 5000);
  }
}

https://payment.gateway.com/pay?reference=REF123&amount=800.00&return=https://app.example.com/membership/payment-return

export enum ProcessState {
  NONE = 'NONE',
  RUNNING = 'RUNNING',
  SUSPENDED = 'SUSPENDED',
  DONE = 'DONE',
  PENDING_PAYMENT = 'PENDING_PAYMENT',
  COMPLETED = 'COMPLETED',
  CANCELLED = 'CANCELLED',
  RESUME = 'RESUME'
}

@Injectable({ providedIn: 'root' })
export class FormService {
  private formResourceService = inject(FormResourceService);
  private blobUtils = inject(BlobUtilsService);

  /**
   * Get form membership details
   */
  getFormMembership(membershipPeriodId: number, userKey: string): Observable<FormDTO> {
    return this.formResourceService
      .getFormMembership(membershipPeriodId, userKey)
      .pipe(
        mergeMap(response => this.blobUtils.parseBlob<FormDTO>(response)),
        map(formDTO => this.convertToExtendedFormDTO(formDTO))
      );
  }

  /**
   * Reset an existing form process
   */
  reset(processId: string): Observable<FormDTO> {
    return this.formResourceService.reset(processId)
      .pipe(
        mergeMap(response => this.blobUtils.parseBlob<FormDTO>(response)),
        map(formDTO => this.convertToExtendedFormDTO(formDTO))
      );
  }

  /**
   * Resume an existing form process
   */
  resume(processId: string): Observable<FormDTO> {
    return this.formResourceService.resume(processId)
      .pipe(
        mergeMap(response => this.blobUtils.parseBlob<FormDTO>(response)),
        map(formDTO => this.convertToExtendedFormDTO(formDTO))
      );
  }

  /**
   * Submit form data and get next step
   */
  next(data: any): Observable<FormDTO> {
    const headers = TimeoutInterceptor.getHeadersWithTimeout(15000);

    const options = {
      httpHeaderAccept: '*/*' as const,
      headers,
    };

    return this.formResourceService.next(data, 'body', false, options)
      .pipe(
        mergeMap(response => this.blobUtils.parseBlob<FormDTO>(response)),
        map(formDTO => this.convertToExtendedFormDTO(formDTO))
      );
  }
}

@Injectable({ providedIn: 'root' })
export class SessionService {
  private userKeySubject = new BehaviorSubject<string>('');
  private membershipIdSubject = new BehaviorSubject<number | null>(null);

  userKey$ = this.userKeySubject.asObservable();
  membershipId$ = this.membershipIdSubject.asObservable();

  setUserKey(userKey: string): string {
    this.userKeySubject.next(userKey);
    sessionStorage.setItem('userKey', userKey);
    return userKey;
  }

  getUserKey(): string {
    return this.userKeySubject.value ||
           sessionStorage.getItem('userKey') || '';
  }

  setMembershipId(membershipId: number): number {
    this.membershipIdSubject.next(membershipId);
    sessionStorage.setItem('membershipId', membershipId.toString());
    return membershipId;
  }

  getMembershipId(): number | null {
    return this.membershipIdSubject.value ||
           parseInt(sessionStorage.getItem('membershipId') || '0', 10) ||
           null;
  }
}

ngOnInit(): void {
  // Check for error in query params
  const error = this.route.snapshot.queryParamMap.get('error');
  if (error) {
    this.accessDenied = true;
    return;
  }

  // Check for access denied from route data
  if (this.route.snapshot.data['accessDenied']) {
    this.accessDenied = true;
    return;
  }

  this.initializeComponentData();
}

private handleError(error: any): void {
  this.messageService.add({
    severity: 'error',
    summary: 'Error',
    detail: error.message || 'An error occurred during the operation',
    life: 5000,
  });
}

next(data: any): Observable<FormDTO> {
  const headers = TimeoutInterceptor.getHeadersWithTimeout(15000);

  const options = {
    httpHeaderAccept: '*/*' as const,
    headers,
  };

  return this.formResourceService.next(data, 'body', false, options)
    .pipe(
      mergeMap(response => this.blobUtils.parseBlob<FormDTO>(response)),
      map(formDTO => this.convertToExtendedFormDTO(formDTO))
    );
}