TT-16169: Update theme from default-portal (#26)

Author: edsonmichaque

src/assets/fonts/Inter-SemiBold.woff

@@ -170,6 +170,194 @@ dcrTriggers.forEach((t) => {
     );
   });
 });
+
+/* Handle credential selection visibility in portal_checkout.tmpl
+ * HTML is server-rendered, JS only handles show/hide interactivity
+ */
+
+/* Toggle between create_new and reuse_existing credential options */
+document.addEventListener('change', (e) => {
+  if (e.target.name !== 'credential_action') return;
+
+  const container = e.target.closest('.app-credentials');
+  if (!container) return;
+
+  const selectDiv = container.querySelector('[id^="credential-select-"]');
+  const infoDiv = container.querySelector('[id^="new-credential-info-"]');
+  const dropdownBtn = container.querySelector('.credential-dropdown .dropdown-toggle');
+  const hiddenInput = container.querySelector('input[name="credential_id"]');
+
+  const isReuse = e.target.value === 'reuse_existing';
+
+  if (selectDiv) {
+    selectDiv.classList.toggle('d-none', !isReuse);
+    selectDiv.classList.toggle('d-block', isReuse);
+  }
+  if (infoDiv) {
+    infoDiv.classList.toggle('d-none', isReuse);
+    infoDiv.classList.toggle('d-block', !isReuse);
+  }
+  if (dropdownBtn) {
+    dropdownBtn.disabled = !isReuse;
+    if (!isReuse) {
+      // Reset dropdown to placeholder
+      dropdownBtn.innerHTML = '<span class="placeholder-text">Select a credential</span>';
+      if (hiddenInput) hiddenInput.value = '';
+    }
+  }
+});
+
+/* Handle credential dropdown item selection */
+document.addEventListener('click', (e) => {
+  const dropdownItem = e.target.closest('.credential-dropdown .dropdown-item');
+  if (!dropdownItem) return;
+
+  e.preventDefault();
+
+  const dropdown = dropdownItem.closest('.credential-dropdown');
+  const dropdownBtn = dropdown.querySelector('.dropdown-toggle');
+  const hiddenInput = dropdown.querySelector('input[name="credential_id"]');
+
+  const credId = dropdownItem.dataset.value;
+  const displayName = dropdownItem.dataset.displayName;
+  const plan = dropdownItem.dataset.plan;
+  const authType = dropdownItem.dataset.auth;
+
+  // Update hidden input
+  if (hiddenInput) hiddenInput.value = credId;
+
+  // Update button content to show selected credential
+  dropdownBtn.innerHTML = `
+    <span class="selected-content">
+      <span class="credential-label">${displayName} | ${plan}</span>
+      <span class="pill">${authType}</span>
+    </span>
+  `;
+
+  // Mark item as active
+  dropdown.querySelectorAll('.dropdown-item').forEach(item => item.classList.remove('active'));
+  dropdownItem.classList.add('active');
+});
+
+/* Handle app-action radio button changes (create new app vs existing app) */
+const appActionRadios = document.querySelectorAll('input[name="app-action"]');
+appActionRadios.forEach((radio) => {
+  radio.addEventListener("change", (e) => {
+    const form = e.target.closest("form");
+    if (!form) return;
+
+    const credentialSection = form.querySelector(".credential-selection-section");
+    if (!credentialSection) return;
+
+    const newAppCredentials = credentialSection.querySelector(".new-app-credentials");
+    const allAppCredentials = credentialSection.querySelectorAll(".app-credentials");
+
+    if (e.target.value === "create") {
+      // Show new app credentials section
+      if (newAppCredentials) newAppCredentials.style.display = "block";
+      allAppCredentials.forEach((div) => {
+        div.style.display = "none";
+        // Disable credential dropdown when creating new app
+        const dropdownBtn = div.querySelector('.credential-dropdown .dropdown-toggle');
+        if (dropdownBtn) {
+          dropdownBtn.disabled = true;
+        }
+      });
+    } else if (e.target.value === "existing") {
+      // Hide new app credentials section
+      if (newAppCredentials) newAppCredentials.style.display = "none";
+
+      // Show credentials for the selected app
+      const appSelect = form.querySelector("#appsControlSelect");
+      if (appSelect && appSelect.value) {
+        showCredentialsForApp(appSelect, appSelect.value);
+      }
+    }
+  });
+});
+
+/* Handle app selection changes to show correct credentials */
+const appSelects = document.querySelectorAll("#appsControlSelect");
+appSelects.forEach((appSelect) => {
+  // Listen for app selection changes
+  appSelect.addEventListener("change", (e) => {
+    const selectedAppId = e.target.value;
+    showCredentialsForApp(e.target, selectedAppId);
+  });
+
+  // Initialize: disable all credential dropdowns and hidden inputs except for currently selected app
+  const form = appSelect.closest("form");
+  if (form) {
+    const credentialSection = form.querySelector(".credential-selection-section");
+    if (credentialSection) {
+      const allAppCredentials = credentialSection.querySelectorAll(".app-credentials");
+      allAppCredentials.forEach((div) => {
+        const dropdownBtn = div.querySelector('.credential-dropdown .dropdown-toggle');
+        if (dropdownBtn) {
+          dropdownBtn.disabled = true;
+        }
+        // Disable hidden inputs so they don't get submitted with the form
+        const hiddenInput = div.querySelector('input[name="credential_id"]');
+        if (hiddenInput) {
+          hiddenInput.disabled = true;
+        }
+      });
+
+      // If an app is already selected, enable its credential dropdown and hidden input
+      if (appSelect.value) {
+        const selectedAppCredentials = credentialSection.querySelector(`.app-credentials[data-app-id="${appSelect.value}"]`);
+        if (selectedAppCredentials) {
+          const dropdownBtn = selectedAppCredentials.querySelector('.credential-dropdown .dropdown-toggle');
+          if (dropdownBtn) {
+            dropdownBtn.disabled = false;
+          }
+          // Enable the hidden input for the selected app
+          const hiddenInput = selectedAppCredentials.querySelector('input[name="credential_id"]');
+          if (hiddenInput) {
+            hiddenInput.disabled = false;
+          }
+        }
+      }
+    }
+  }
+});
+
+/* Show credentials section for selected app (HTML is server-rendered) */
+function showCredentialsForApp(appSelectElement, appId) {
+  const form = appSelectElement.closest("form");
+  if (!form) return;
+
+  const credentialSection = form.querySelector(".credential-selection-section");
+  if (!credentialSection) return;
+
+  // Hide all app-credentials divs, disable their dropdowns and hidden inputs
+  credentialSection.querySelectorAll(".app-credentials").forEach((div) => {
+    div.style.display = "none";
+    const dropdownBtn = div.querySelector('.credential-dropdown .dropdown-toggle');
+    if (dropdownBtn) dropdownBtn.disabled = true;
+    // Disable hidden inputs so they don't get submitted with the form
+    const hiddenInput = div.querySelector('input[name="credential_id"]');
+    if (hiddenInput) hiddenInput.disabled = true;
+  });
+
+  // Show the credentials div for the selected app
+  const selectedAppCredentials = credentialSection.querySelector(`.app-credentials[data-app-id="${appId}"]`);
+  if (!selectedAppCredentials) return;
+
+  selectedAppCredentials.style.display = "block";
+
+  // Enable the hidden input for the selected app so it gets submitted
+  const selectedHiddenInput = selectedAppCredentials.querySelector('input[name="credential_id"]');
+  if (selectedHiddenInput) selectedHiddenInput.disabled = false;
+
+  // Enable dropdown only if "reuse_existing" is selected
+  const dropdownBtn = selectedAppCredentials.querySelector('.credential-dropdown .dropdown-toggle');
+  const reuseRadio = selectedAppCredentials.querySelector('input[name="credential_action"][value="reuse_existing"]');
+  if (dropdownBtn && reuseRadio && reuseRadio.checked) {
+    dropdownBtn.disabled = false;
+  }
+}
+
 //sidebar active
 let id = "/portal" + window.location.href.split("/portal")[1];
 if (id.includes("users")) {
@@ -256,3 +444,33 @@ FilterObserver(
   "apps-filter-latency-chart",
   FilterObserverHanlderForLatencyChart
 );
+
+$(document).on('show.bs.modal', '[id^="change-plan-"]', function () {
+  const modal = $(this);
+  const plansGrid = modal.find('.plans-grid');
+  const hiddenInput = modal.find('input[type="hidden"][name="new_plan_id"]');
+  const submitBtn = modal.find('button[type="submit"]');
+
+  plansGrid.find('.plan-card').on('click', function() {
+    if ($(this).hasClass('disabled') || $(this).data('is-current')) {
+      return;
+    }
+
+    const planId = $(this).data('plan-id');
+    plansGrid.find('.plan-card').removeClass('selected');
+    $(this).addClass('selected');
+    hiddenInput.val(planId);
+    submitBtn.prop('disabled', false);
+  });
+});
+
+$(document).on('hidden.bs.modal', '[id^="change-plan-"]', function () {
+  const modal = $(this);
+  const plansGrid = modal.find('.plans-grid');
+  const hiddenInput = modal.find('input[type="hidden"][name="new_plan_id"]');
+  const submitBtn = modal.find('button[type="submit"]');
+
+  plansGrid.find('.plan-card').removeClass('selected');
+  hiddenInput.val('');
+  submitBtn.prop('disabled', true);
+});

src/assets/fonts/Inter-SemiBold.woff2

@@ -31,4 +31,10 @@
 .error-wrapper{
   width: 80%;
   margin-left: 20%;
+}
+.dropdown-menu {
+  border-radius: var(--tdp-dropdown-menu-radius);
+}
+.dropdown-toggle::after {
+    content: none !important;
 }

src/assets/javascripts/main.js

@@ -13,12 +13,12 @@ footer .footer-menu__link {
 
 .navbar-dark .navbar-nav .nav-link {
   color: var(--tdp-nav-link-color);
-  font-family: 'OpenSans-Semibold';
+  font-family: Inter-SemiBold, sans-serif;
 }
 
 .navbar-dark .navbar-nav .nav-link:focus,
 .navbar-dark .navbar-nav .nav-link:hover {
-  color: var(--tdp-link-color);
+  color: var(--tdp-primary);
 }
 
 .navbar {
@@ -51,7 +51,6 @@ footer .footer-menu__link {
 .navbar .nav-link,
 .navbar .navbar-brand {
   color: var(--tdp-nav-link-color);
-  text-transform: uppercase;
 }
 
 .navbar .nav-link {
@@ -62,7 +61,6 @@ footer .footer-menu__link {
 .navbar .navbar-brand {
   font-size: 20px;
   margin-right: 40px;
-  font-family: 'OpenSans-Bold';
 }
 
 .btn-login {
@@ -75,7 +73,8 @@ footer .footer-menu__link {
 }
 
 .badge {
-  border-radius: 9px;
+  border-radius: 6px;
+  color: var(--tdp-text-color-extra-dark);;
 }
 
 .cart__item-count {
@@ -90,9 +89,9 @@ footer .footer-menu__link {
 
 /* Submenu */
 .submenu {
-  background: var(--tdp-secondary-dark);
-  padding: 0;
-  margin: 0;
+  background: white;
+  border: 1px solid var(--border-neutral-default);
+  border-radius: 8px;
 }
 
 .submenu .dropdown-item {
@@ -108,18 +107,17 @@ footer .footer-menu__link {
 }
 
 .submenu .dropdown-item {
-  color: white;
+  color: var(--tdb-text-default-subdue);
 }
 
 .dropdown-item:focus,
 .dropdown-item:hover {
-  background-color: var(--tdp-extra-dark);
-  color: var(--tdp-primary);
+  background-color: var(--surface-neutral-hover);
+  color: var(--tdp-text-color-extra-dark);
 }
 
 .admin-dash {
   text-decoration: underline;
-  font-family: 'OpenSans-SemiBold';
 }
 
 .side-menu-container{
@@ -161,16 +159,16 @@ footer .footer-menu__link {
   color: #43435B;
 }
 .sidebar-active {
-  background-color: #EBEDF4;
+  background-color: var(--tdp-tab-active);
 }
 .sidebar-nav li:hover{
-  background-color: #EBEDF4;
+  background-color: var(--tdp-tab-active);
 }
 .sidebar-nav li:target{
-  background-color: #EBEDF4;
+  background-color: var(--tdp-tab-active);
 }
 .sidebar-nav li:focus{
-  background-color: #EBEDF4;
+  background-color: var(--tdp-tab-active);
 }
 .sidebar-nav i{
   margin-bottom: 5px;

src/assets/stylesheets/common/form.css

@@ -24,7 +24,7 @@ a.breadcrumb-link,
 a.breadcrumb-link:hover {
   color: var(--tdp-dark);
   text-decoration: underline;
-  font-family: 'OpenSans-Semibold';
+  font-family: Inter-Semibold, sans-serif;
 }
 
 a.brand-link,