chamilo · christianbeeznest · Jun 16, 2026 · Jun 16, 2026
diff --git a/assets/vue/components/course/Form.vue b/assets/vue/components/course/Form.vue
@@ -29,7 +29,7 @@
           </p>
         </div>
 
-        <div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
+        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
           <button
             v-if="standardCourseOption"
             class="rounded-2xl border p-4 text-left transition"
@@ -78,14 +78,16 @@
             </p>
           </button>
 
-          <button
+          <article
             v-for="serviceOption in serviceCourseOptions"
             :key="`service-${serviceOption.serviceId}`"
             class="rounded-2xl border p-4 text-left transition"
             :class="getCourseOptionClasses(serviceOption)"
-            type="button"
-            :disabled="!serviceOption.available"
+            :role="serviceOption.available ? 'button' : null"
+            :tabindex="serviceOption.available ? 0 : -1"
             @click="selectCourseOption('service', serviceOption.serviceSaleId)"
+            @keydown.enter.prevent="selectCourseOption('service', serviceOption.serviceSaleId)"
+            @keydown.space.prevent="selectCourseOption('service', serviceOption.serviceSaleId)"
           >
             <div class="flex items-start justify-between gap-3">
               <div>
@@ -128,15 +130,15 @@
               </span>
               <a
                 v-else-if="serviceOption.buyUrl"
-                class="font-semibold text-primary hover:underline"
+                class="inline-flex items-center justify-center rounded-lg bg-primary px-3 py-2 text-xs font-semibold text-white shadow-sm transition hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2"
                 :href="serviceOption.buyUrl"
                 @click.stop
               >
                 {{ t("Buy service") }}
               </a>
               <a
                 v-if="serviceOption.informationUrl"
-                class="font-semibold text-primary hover:underline"
+                class="inline-flex items-center justify-center rounded-lg border border-primary/30 bg-white px-3 py-2 text-xs font-semibold text-primary shadow-sm transition hover:border-primary hover:bg-primary/5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2"
                 :href="serviceOption.informationUrl"
                 @click.stop
               >
@@ -150,7 +152,7 @@
             >
               {{ getDisabledReasonLabel(serviceOption.disabledReason) }}
             </p>
-          </button>
+          </article>
         </div>
 
         <p
@@ -397,6 +399,18 @@ function applyDefaultLanguageIfEmpty() {
 }
 
 function selectCourseOption(type, serviceSaleId = null) {
+  if (type === "service") {
+    const serviceOption = serviceCourseOptions.value.find((option) => option.serviceSaleId === serviceSaleId)
+
+    if (!serviceOption?.available) {
+      return
+    }
+  }
+
+  if (type === "standard" && !standardCourseOption.value?.available) {
+    return
+  }
+
   selectedCourseOptionType.value = type
   selectedBuyCoursesServiceSaleId.value = type === "service" ? serviceSaleId : null
 }
@@ -407,6 +421,10 @@ function getCourseOptionClasses(option) {
     : selectedCourseOptionType.value === "service" && selectedBuyCoursesServiceSaleId.value === option.serviceSaleId
 
   if (!option.available) {
+    if (option.disabledReason === "service_not_purchased") {
+      return "border-gray-25 bg-white"
+    }
+
     return "cursor-not-allowed border-gray-25 bg-gray-15 opacity-60"
   }
 

diff --git a/public/plugin/BuyCourses/lang/en_US.php b/public/plugin/BuyCourses/lang/en_US.php
@@ -40,6 +40,7 @@
 $strings['ProcessingPayoutsDontCloseThisWindow'] = "<b>Proceeding with payments. Don't close this window until this process is finalized.</b>";
 $strings['PayoutSuccess'] = 'Payments processed successfully';
 $strings['Buyer'] = 'Buyer';
+$strings['PurchaseDate'] = 'Purchase date';
 $strings['BankTransfer'] = 'Bank transfer';
 $strings['SaleInfo'] = 'Sale information';
 $strings['SaleStatusPending'] = 'Sale pending';

diff --git a/public/plugin/BuyCourses/lang/es.php b/public/plugin/BuyCourses/lang/es.php
@@ -40,6 +40,7 @@
 $strings['ProcessingPayoutsDontCloseThisWindow'] = '<b>Procesando los pagos, no cierre esta ventana hasta que haya finalizado</b>';
 $strings['PayoutSuccess'] = 'Los pagos se han realizado con éxito';
 $strings['Buyer'] = 'Comprador';
+$strings['PurchaseDate'] = 'Fecha de compra';
 $strings['BankTransfer'] = 'Transferencia Bancaria';
 $strings['SaleInfo'] = 'Información de la venta';
 $strings['SaleStatusPending'] = 'Venta pendiente';

diff --git a/public/plugin/BuyCourses/lang/fr_FR.php b/public/plugin/BuyCourses/lang/fr_FR.php
@@ -40,6 +40,7 @@
 $strings['ProcessingPayoutsDontCloseThisWindow'] = '<b>Exécution des paiements. Ne fermez pas cette fenêtre avant que le processus ne soit finalisé.</b>';
 $strings['PayoutSuccess'] = 'Paiements effectués avec succès';
 $strings['Buyer'] = 'Acheteur';
+$strings['PurchaseDate'] = 'Date d’achat';
 $strings['BankTransfer'] = 'Transfert bancaire';
 $strings['SaleInfo'] = 'Information vente';
 $strings['SaleStatusPending'] = 'Vente non confirmée';

diff --git a/public/plugin/BuyCourses/view/process_confirm.tpl b/public/plugin/BuyCourses/view/process_confirm.tpl
@@ -109,7 +109,7 @@
                                         <em class="fa fa-user"></em>
                                     </span>
                                     <div>
-                                        <div class="font-semibold text-gray-90">{{ 'Buyer'|get_lang }}</div>
+                                        <div class="font-semibold text-gray-90">{{ 'Buyer'|get_plugin_lang('BuyCoursesPlugin') }}</div>
                                         <div>{{ service_sale.buyer.name }}</div>
                                     </div>
                                 </div>
@@ -119,7 +119,7 @@
                                         <em class="fa fa-calendar"></em>
                                     </span>
                                     <div>
-                                        <div class="font-semibold text-gray-90">{{ 'PurchaseDate'|get_lang }}</div>
+                                        <div class="font-semibold text-gray-90">{{ 'PurchaseDate'|get_plugin_lang('BuyCoursesPlugin') }}</div>
                                         <div>{{ service_sale.buy_date }}</div>
                                     </div>
                                 </div>
@@ -221,7 +221,7 @@
             <div class="rounded-3xl border border-gray-25 bg-white p-6 shadow-sm">
                 <div class="space-y-5">
                     <div class="space-y-2">
-                        <h2 class="text-lg font-semibold text-gray-90">Summary</h2>
+                        <h2 class="text-lg font-semibold text-gray-90">{{ 'ServiceProcessSummaryTitle'|get_plugin_lang('BuyCoursesPlugin') }}</h2>
                         <p class="text-sm leading-6 text-gray-50">
                             {{ 'ConfirmFinalDetails'|get_plugin_lang('BuyCoursesPlugin') }}
                         </p>

diff --git a/public/plugin/BuyCourses/view/service_process.tpl b/public/plugin/BuyCourses/view/service_process.tpl
@@ -345,3 +345,47 @@
     });
 </script>
 {% endautoescape %}
+
+<script>
+(function () {
+  function findFieldContainer(field) {
+    if (!field) {
+      return null;
+    }
+
+    return field.closest('.form-group, .form-row, .control-group, .row, .mb-3, .mb-4, tr, p, div') || field.parentElement;
+  }
+
+  function toggleBusinessBuyerFields() {
+    var buyerType = document.querySelector('[name="buyer_type"]');
+    var isBusiness = buyerType && buyerType.value === 'business';
+    var fieldNames = ['buyer_vat_number', 'buyer_business_name', 'buyer_business_address'];
+
+    fieldNames.forEach(function (fieldName) {
+      var field = document.querySelector('[name="' + fieldName + '"]');
+      var container = findFieldContainer(field);
+
+      if (!field || !container) {
+        return;
+      }
+
+      container.classList.add('buycourses-business-buyer-field');
+      container.style.display = isBusiness ? '' : 'none';
+      field.disabled = !isBusiness;
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    var buyerType = document.querySelector('[name="buyer_type"]');
+
+    if (!buyerType) {
+      return;
+    }
+
+    buyerType.classList.add('buycourses-toggle-business-buyer-fields');
+    buyerType.addEventListener('change', toggleBusinessBuyerFields);
+    toggleBusinessBuyerFields();
+  });
+})();
+</script>
+