fix(nbp): stop QR code countdown when leaving the page

Part of XI-6523

Author: nenock

app/assets/javascripts/nbp_wallet.js

@@ -1,43 +1,52 @@
 let templateValidity = 0;
-let finalizing = false;
+let intervalID;
+let timeoutID;
 
 const checkStatus = async () => {
-  if (!finalizing) {
-    try {
-      const response = await fetch('/nbp_wallet/relationship_status');
-      const json = await response.json();
-
-      if (json.status === 'ready' && !finalizing) {
-        finalizing = true;
-        window.location.pathname = '/nbp_wallet/finalize';
-      }
-    } catch (error) {
-      console.error(error);
+  try {
+    const response = await fetch(Routes.nbp_wallet_relationship_status_users_path());
+    const json = await response.json();
+
+    if (json.status === 'ready' && window.location.pathname === Routes.nbp_wallet_connect_users_path()) {
+      window.location.pathname = Routes.nbp_wallet_finalize_users_path();
+      return;
     }
+  } catch (error) {
+    console.error(error);
   }
-  setTimeout(checkStatus, 1000);
+  timeoutID = setTimeout(checkStatus, 1000);
 };
 
 const countdownValidity = () => {
   if (templateValidity > 0) {
     templateValidity -= 1;
   }
-  if (templateValidity === 0) {
+  if (templateValidity === 0 && window.location.pathname === Routes.nbp_wallet_connect_users_path()) {
     window.location.reload();
   }
 };
 
+window.addEventListener("turbolinks:before-render", () => {
+  clearInterval(intervalID);
+  clearTimeout(timeoutID);
+});
+
+window.addEventListener("beforeunload", () => {
+  clearInterval(intervalID);
+  clearTimeout(timeoutID);
+});
+
 $(document).on('turbolinks:load', function () {
-  if (window.location.pathname !== '/nbp_wallet/connect') {
+  if (window.location.pathname !== Routes.nbp_wallet_connect_users_path()) {
     return;
   }
 
-  document.querySelector('.regenerate-qr-code-button').addEventListener('click', () => {
+  document.querySelector('[data-behavior=reload-on-click]').addEventListener('click', () => {
     window.location.reload();
   });
 
   // Subtract 5 seconds to make sure the displayed code is always valid (accounting for loading times)
   templateValidity = document.querySelector('[data-id="nbp_wallet_qr_code"]').dataset.remainingValidity - 5;
   checkStatus();
-  setInterval(countdownValidity, 1000);
+  intervalID = setInterval(countdownValidity, 1000);
 });

app/assets/stylesheets/users.css.scss

@@ -10,7 +10,7 @@
   display: inline;
 }
 
-img.nbp_wallet_qr_code {
+img.pixelated {
   image-rendering: pixelated;
   width: 100%;
 }

app/controllers/users/nbp_wallet_controller.rb

@@ -11,7 +11,7 @@ def connect
         redirect_to nbp_wallet_finalize_users_path and return
       end
 
-      @template = Enmeshed::RelationshipTemplate.create!(nbp_uid: @provider_uid)
+      @relationship_template = Enmeshed::RelationshipTemplate.create!(nbp_uid: @provider_uid)
     rescue Enmeshed::ConnectorError, Faraday::Error => e
       Sentry.capture_exception(e)
       Rails.logger.debug { e }

app/views/users/nbp_wallet/connect.html.slim

@@ -5,15 +5,21 @@
 
 .row
   .col-8.col-md-4.col-lg-3
-    = link_to @template.url
-      = image_tag @template.qr_code_path, data: {'template-validity': @template.remaining_validity&.seconds}, alt: t('.qr_code_alt_text'), class: 'img-fluid nbp_wallet_qr_code'
-    = button_tag class: 'btn btn-primary regenerate-qr-code-button w-100 mt-3' do
+    = link_to @relationship_template.url
+      = image_tag @relationship_template.qr_code_path,
+        data: {id: 'nbp_wallet_qr_code', 'remaining-validity': @relationship_template.remaining_validity.seconds},
+        alt: t('.qr_code_alt_text'),
+        class: 'img-fluid pixelated'
+    .btn.btn-primary.w-100.mt-3 data-behavior='reload-on-click'
       = t('.regenerate_code')
     = link_to destroy_user_session_path, method: :delete, class: 'btn btn-outline-danger w-100 mt-3'
       =  t('.cancel_registration')
   .col-8.col-md-6.mt-3.ms-md-3.mt-md-0
     p.fs-6
-      = t('.info_html', alternative_link: @template.url, app_store_link: @template.app_store_link, play_store_link: @template.play_store_link)
+      = t('.info_html',
+        alternative_link: @relationship_template.url,
+        app_store_link: @relationship_template.app_store_link,
+        play_store_link: @relationship_template.play_store_link)
 
 hr.mt-5
 h5