🚑️(frontend) fix critical Lyra error since latest SDK version

Since the SDK released on 20/08/2024, Lyra pop-in raises an error when the
method closePopIn is triggered. In our case, this trigger an infinite loop and
prevent the payment to succeed.

CHANGELOG.md

@@ -14,6 +14,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 
+- Fix LyraPopIn critical error
 - Fix typo in page-admin autocomplete url path
 - Fix course enrollment count shouldn't include the hidden runs.
 - Fix RDFa errors on Google Search Console

src/frontend/js/components/PaymentInterfaces/LyraPopIn.tsx

@@ -96,12 +96,17 @@ const LyraPopIn = ({
     const handleFormError = async (error: KRError) => {
       // Do not close the pop-in if the error is a invalid data error (CLIENT_3XX).
       // https://docs.lyra.com/fr/rest/V4.0/javascript/features/js_error_management.html#client004
-      if (!error.errorCode.startsWith('CLIENT_3')) {
+      const { errorCode, errorMessage, detailedErrorMessage } = error;
+      // Since the latest version of Lyra SDK released on 20/08/2024,
+      // the error code CLIENT_106 is raised when the user closes the pop-in so with our
+      // current implementation it triggers an infinite loop...
+      // A patch from Lyra is planned, until that we have to ignore this error.
+      if (!errorCode.startsWith('CLIENT_3') && !['CLIENT_106'].includes(errorCode)) {
         shouldAbort.current = false;
         await KR.closePopin(formId);
-        let errorMessages = error.errorMessage;
-        if (error.detailedErrorMessage) {
-          errorMessages += `: ${error.detailedErrorMessage}`;
+        let errorMessages = errorMessage;
+        if (detailedErrorMessage) {
+          errorMessages += `: ${detailedErrorMessage}`;
         }
         handleError(errorMessages);
       }

src/frontend/js/components/SaleTunnel/GenericPaymentButton/index.tsx

@@ -279,7 +279,8 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
         });
     } else if (error && !messages.hasOwnProperty(error)) {
       orderMethods.invalidate();
-    } else if (state === ComponentStates.ERROR) {
+    }
+    if (state === ComponentStates.ERROR) {
       setPayment(undefined);
     }
   }, [error]);