chore: check if canClaimCert before calling backend (#46029)

* chore: check if canClaimCert before calling backend

* refactor: make canClaimCert declarative

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/redux/settings/settings-sagas.js

@@ -1,5 +1,12 @@
 import { omit } from 'lodash-es';
-import { call, delay, put, takeLatest, takeEvery } from 'redux-saga/effects';
+import {
+  call,
+  delay,
+  put,
+  select,
+  takeLatest,
+  takeEvery
+} from 'redux-saga/effects';
 
 import { createFlashMessage } from '../../components/Flash/redux';
 import {
@@ -10,6 +17,8 @@ import {
   putUpdateUserFlag,
   putVerifyCert
 } from '../../utils/ajax';
+import { certMap } from '../../resources/cert-and-project-map';
+import { completedChallengesSelector } from '..';
 import {
   updateUserFlagComplete,
   updateUserFlagError,
@@ -78,6 +87,28 @@ function* validateUsernameSaga({ payload }) {
 }
 
 function* verifyCertificationSaga({ payload }) {
+  // check redux if can claim cert before calling backend
+  const completedChallenges = yield select(completedChallengesSelector);
+  const currentCert = certMap.find(cert => cert.certSlug === payload);
+  const currentCertIds = currentCert?.projects.map(project => project.id);
+  const certTitle = currentCert?.title || payload;
+
+  const flash = {
+    type: 'info',
+    message: 'flash.incomplete-steps',
+    variables: { name: certTitle }
+  };
+
+  const canClaimCert = currentCertIds.every(id =>
+    completedChallenges.find(challenge => challenge.id === id)
+  );
+
+  if (!canClaimCert) {
+    yield put(createFlashMessage(flash));
+    return;
+  }
+
+  // redux says challenges are complete, call back end
   try {
     const { response, isCertMap, completedChallenges } = yield call(
       putVerifyCert,