Skip to content

Commit 996c4f1

Browse files
christianbeeznestchristianbeeznest
authored
Merge pull request #8598 from christianbeeznest/fixes-plugin-buycourse09
Plugin: Fix BuyCourses purchase and course creation UI
2 parents df4eb2c + 0cb0415 commit 996c4f1

6 files changed

Lines changed: 75 additions & 10 deletions

File tree

‎assets/vue/components/course/Form.vue‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
</p>
3030
</div>
3131

32-
<div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
32+
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
3333
<button
3434
v-if="standardCourseOption"
3535
class="rounded-2xl border p-4 text-left transition"
@@ -78,14 +78,16 @@
7878
</p>
7979
</button>
8080

81-
<button
81+
<article
8282
v-for="serviceOption in serviceCourseOptions"
8383
:key="`service-${serviceOption.serviceId}`"
8484
class="rounded-2xl border p-4 text-left transition"
8585
:class="getCourseOptionClasses(serviceOption)"
86-
type="button"
87-
:disabled="!serviceOption.available"
86+
:role="serviceOption.available ? 'button' : null"
87+
:tabindex="serviceOption.available ? 0 : -1"
8888
@click="selectCourseOption('service', serviceOption.serviceSaleId)"
89+
@keydown.enter.prevent="selectCourseOption('service', serviceOption.serviceSaleId)"
90+
@keydown.space.prevent="selectCourseOption('service', serviceOption.serviceSaleId)"
8991
>
9092
<div class="flex items-start justify-between gap-3">
9193
<div>
@@ -128,15 +130,15 @@
128130
</span>
129131
<a
130132
v-else-if="serviceOption.buyUrl"
131-
class="font-semibold text-primary hover:underline"
133+
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"
132134
:href="serviceOption.buyUrl"
133135
@click.stop
134136
>
135137
{{ t("Buy service") }}
136138
</a>
137139
<a
138140
v-if="serviceOption.informationUrl"
139-
class="font-semibold text-primary hover:underline"
141+
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"
140142
:href="serviceOption.informationUrl"
141143
@click.stop
142144
>
@@ -150,7 +152,7 @@
150152
>
151153
{{ getDisabledReasonLabel(serviceOption.disabledReason) }}
152154
</p>
153-
</button>
155+
</article>
154156
</div>
155157

156158
<p
@@ -397,6 +399,18 @@ function applyDefaultLanguageIfEmpty() {
397399
}
398400
399401
function selectCourseOption(type, serviceSaleId = null) {
402+
if (type === "service") {
403+
const serviceOption = serviceCourseOptions.value.find((option) => option.serviceSaleId === serviceSaleId)
404+
405+
if (!serviceOption?.available) {
406+
return
407+
}
408+
}
409+
410+
if (type === "standard" && !standardCourseOption.value?.available) {
411+
return
412+
}
413+
400414
selectedCourseOptionType.value = type
401415
selectedBuyCoursesServiceSaleId.value = type === "service" ? serviceSaleId : null
402416
}
@@ -407,6 +421,10 @@ function getCourseOptionClasses(option) {
407421
: selectedCourseOptionType.value === "service" && selectedBuyCoursesServiceSaleId.value === option.serviceSaleId
408422
409423
if (!option.available) {
424+
if (option.disabledReason === "service_not_purchased") {
425+
return "border-gray-25 bg-white"
426+
}
427+
410428
return "cursor-not-allowed border-gray-25 bg-gray-15 opacity-60"
411429
}
412430

‎public/plugin/BuyCourses/lang/en_US.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
$strings['ProcessingPayoutsDontCloseThisWindow'] = "<b>Proceeding with payments. Don't close this window until this process is finalized.</b>";
4141
$strings['PayoutSuccess'] = 'Payments processed successfully';
4242
$strings['Buyer'] = 'Buyer';
43+
$strings['PurchaseDate'] = 'Purchase date';
4344
$strings['BankTransfer'] = 'Bank transfer';
4445
$strings['SaleInfo'] = 'Sale information';
4546
$strings['SaleStatusPending'] = 'Sale pending';

‎public/plugin/BuyCourses/lang/es.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
$strings['ProcessingPayoutsDontCloseThisWindow'] = '<b>Procesando los pagos, no cierre esta ventana hasta que haya finalizado</b>';
4141
$strings['PayoutSuccess'] = 'Los pagos se han realizado con éxito';
4242
$strings['Buyer'] = 'Comprador';
43+
$strings['PurchaseDate'] = 'Fecha de compra';
4344
$strings['BankTransfer'] = 'Transferencia Bancaria';
4445
$strings['SaleInfo'] = 'Información de la venta';
4546
$strings['SaleStatusPending'] = 'Venta pendiente';

‎public/plugin/BuyCourses/lang/fr_FR.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
$strings['ProcessingPayoutsDontCloseThisWindow'] = '<b>Exécution des paiements. Ne fermez pas cette fenêtre avant que le processus ne soit finalisé.</b>';
4141
$strings['PayoutSuccess'] = 'Paiements effectués avec succès';
4242
$strings['Buyer'] = 'Acheteur';
43+
$strings['PurchaseDate'] = 'Date d’achat';
4344
$strings['BankTransfer'] = 'Transfert bancaire';
4445
$strings['SaleInfo'] = 'Information vente';
4546
$strings['SaleStatusPending'] = 'Vente non confirmée';

‎public/plugin/BuyCourses/view/process_confirm.tpl‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
<em class="fa fa-user"></em>
110110
</span>
111111
<div>
112-
<div class="font-semibold text-gray-90">{{ 'Buyer'|get_lang }}</div>
112+
<div class="font-semibold text-gray-90">{{ 'Buyer'|get_plugin_lang('BuyCoursesPlugin') }}</div>
113113
<div>{{ service_sale.buyer.name }}</div>
114114
</div>
115115
</div>
@@ -119,7 +119,7 @@
119119
<em class="fa fa-calendar"></em>
120120
</span>
121121
<div>
122-
<div class="font-semibold text-gray-90">{{ 'PurchaseDate'|get_lang }}</div>
122+
<div class="font-semibold text-gray-90">{{ 'PurchaseDate'|get_plugin_lang('BuyCoursesPlugin') }}</div>
123123
<div>{{ service_sale.buy_date }}</div>
124124
</div>
125125
</div>
@@ -221,7 +221,7 @@
221221
<div class="rounded-3xl border border-gray-25 bg-white p-6 shadow-sm">
222222
<div class="space-y-5">
223223
<div class="space-y-2">
224-
<h2 class="text-lg font-semibold text-gray-90">Summary</h2>
224+
<h2 class="text-lg font-semibold text-gray-90">{{ 'ServiceProcessSummaryTitle'|get_plugin_lang('BuyCoursesPlugin') }}</h2>
225225
<p class="text-sm leading-6 text-gray-50">
226226
{{ 'ConfirmFinalDetails'|get_plugin_lang('BuyCoursesPlugin') }}
227227
</p>

‎public/plugin/BuyCourses/view/service_process.tpl‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -345,3 +345,47 @@
345345
});
346346
</script>
347347
{% endautoescape %}
348+
349+
<script>
350+
(function () {
351+
function findFieldContainer(field) {
352+
if (!field) {
353+
return null;
354+
}
355+
356+
return field.closest('.form-group, .form-row, .control-group, .row, .mb-3, .mb-4, tr, p, div') || field.parentElement;
357+
}
358+
359+
function toggleBusinessBuyerFields() {
360+
var buyerType = document.querySelector('[name="buyer_type"]');
361+
var isBusiness = buyerType && buyerType.value === 'business';
362+
var fieldNames = ['buyer_vat_number', 'buyer_business_name', 'buyer_business_address'];
363+
364+
fieldNames.forEach(function (fieldName) {
365+
var field = document.querySelector('[name="' + fieldName + '"]');
366+
var container = findFieldContainer(field);
367+
368+
if (!field || !container) {
369+
return;
370+
}
371+
372+
container.classList.add('buycourses-business-buyer-field');
373+
container.style.display = isBusiness ? '' : 'none';
374+
field.disabled = !isBusiness;
375+
});
376+
}
377+
378+
document.addEventListener('DOMContentLoaded', function () {
379+
var buyerType = document.querySelector('[name="buyer_type"]');
380+
381+
if (!buyerType) {
382+
return;
383+
}
384+
385+
buyerType.classList.add('buycourses-toggle-business-buyer-fields');
386+
buyerType.addEventListener('change', toggleBusinessBuyerFields);
387+
toggleBusinessBuyerFields();
388+
});
389+
})();
390+
</script>
391+

0 commit comments

Comments
 (0)