Skip to content
Code-Schnipsel Gruppen Projekte
Commit 7e22532c erstellt von Michael Danielczok's avatar Michael Danielczok
Dateien durchsuchen

Merge branch '20-feat-ux-error-handling' into 'next-2.x' 

feat: show errors directly under the input

See merge request !20
Übergeordnete 2b857d4f 14ebf231
No related branches found
Tags 2.0.2
3 Merge Requests!22Update 'next-3.x' with latest changes from 'main',!21feat: show errors directly under the input,!20feat: show errors direclty under the input
Pipeline #15948 bestanden mit Phase
in 2 Minuten und 19 Sekunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
ajax/frontend/redeem.php
+ 27
− 38
Zeige Datei @ 7e22532c
<?php
/**
* This file contains package_quiqqer_coupons_ajax_delete
* This file contains package_quiqqer_coupons_ajax_frontend_redeem
*/
use QUI\ERP\Coupons\Handler;
......@@ -13,6 +13,15 @@
* @param int $id - CouponCode ID
* @return bool - success
*/
/**
* Redeem a CouponCode
* @param string $code - coupon code
* @param string $orderHash - Order hash
*
* @throws QUI\Exception
* @throws QUI\ERP\Coupons\CouponCodeException
*/
QUI::$Ajax->registerFunction(
'package_quiqqer_coupons_ajax_frontend_redeem',
function ($code, $orderHash) {
......@@ -23,20 +32,14 @@ function ($code, $orderHash) {
} catch (QUI\ERP\Coupons\CouponCodeException $Exception) {
QUI\System\Log::writeDebugException($Exception);
QUI::getMessagesHandler()->addError($Exception->getMessage());
return false;
throw $Exception;
} catch (Exception $Exception) {
QUI\System\Log::writeException($Exception);
QUI::getMessagesHandler()->addError(
QUI::getLocale()->get(
'quiqqer/coupons',
'message.ajax.general_error'
)
);
return false;
throw new QUI\Exception([
'quiqqer/coupons',
'message.ajax.general_error'
]);
}
$Order = QUI\ERP\Order\Handler::getInstance()->getOrderByHash($orderHash);
......@@ -49,40 +52,28 @@ function ($code, $orderHash) {
foreach ($discounts as $Discount) {
if (!DiscountEvents::isDiscountUsableWithQuantity($Discount, $productCount)) {
QUI::getMessagesHandler()->addError(
QUI::getLocale()->get(
'quiqqer/coupons',
'exception.CouponCode.discounts_invalid'
)
);
return false;
throw new QUI\Exception([
'quiqqer/coupons',
'exception.CouponCode.discounts_invalid'
]);
}
if ($Discount->getAttribute('scope') === QUI\ERP\Discount\Handler::DISCOUNT_SCOPE_GRAND_TOTAL) {
if (!DiscountEvents::isDiscountUsableWithPurchaseValue($Discount, $sum)) {
QUI::getMessagesHandler()->addError(
QUI::getLocale()->get(
'quiqqer/coupons',
'exception.CouponCode.discounts_invalid'
)
);
return false;
throw new QUI\Exception([
'quiqqer/coupons',
'exception.CouponCode.discounts_invalid'
]);
}
continue;
}
if (!DiscountEvents::isDiscountUsableWithPurchaseValue($Discount, $subSum)) {
QUI::getMessagesHandler()->addError(
QUI::getLocale()->get(
'quiqqer/coupons',
'exception.CouponCode.discounts_invalid'
)
);
return false;
throw new QUI\Exception([
'quiqqer/coupons',
'exception.CouponCode.discounts_invalid'
]);
}
}
......@@ -104,8 +95,6 @@ function ($code, $orderHash) {
if ($Order instanceof QUI\ERP\Order\OrderInProcess) {
$CouponCode->addToOrder($Order);
}
return true;
},
['code', 'orderHash']
);
bin/frontend/classes/CouponCodes.js
+ 2
− 1
Zeige Datei @ 7e22532c
......@@ -32,7 +32,8 @@ define('package/quiqqer/coupons/bin/frontend/classes/CouponCodes', [
'package': pkg,
code: code,
orderHash: orderHash,
onError: reject
onError: reject,
showError: false // disable quiqqer message in frontend
});
});
}
......
bin/frontend/controls/CouponCodeInput.css
+ 18
− 1
Zeige Datei @ 7e22532c
.quiqqer-coupons-couponcodeinput {
--_qui-error-text-color: var(--qui-error-text-color, red);
--_qui-error-input-border-color: var(--qui-error-input-border-color, red);
container-type: inline-size;
}
......@@ -14,13 +16,28 @@
}
.quiqqer-coupons-couponcodeinput-input {
min-width: min(250px, 100cqi);
min-width: min(200px, 100cqi);
}
.quiqqer-coupons-remove {
margin-left: 1rem;
}
/* error handling */
input.quiqqer-coupons-couponcodeinput-input[data-invalid] {
border-color: var(--_qui-error-input-border-color)
}
.quiqqer-coupons-couponcodeinput__errorMsg:not([data-show]) {
display: none;
}
:where(.quiqqer-coupons-couponcodeinput__errorMsg[data-show]) {
font-size: 0.875rem;
color: var(--_qui-error-text-color);
margin-top: 0.25rem;
}
/**
* Simple Checkout
*/
......
bin/frontend/controls/CouponCodeInput.html
+ 4
− 2
Zeige Datei @ 7e22532c
......@@ -4,11 +4,13 @@
</label>
<div class="quiqqer-coupons-couponcodeinput__inputGroup">
<input class="quiqqer-coupons-couponcodeinput-input"
type="text" name="code-input" id="code-input" data-name="code-input"
type="text" name="code-input" id="code-input" data-ref="code-input"
placeholder="{{labelInputPlaceholder}}"
autocomplete="off"
/>
<button class="quiqqer-coupons-couponcodeinput-btn btn btn-success" data-name="submit-coupon-code">
<button class="quiqqer-coupons-couponcodeinput-btn btn btn-success" data-ref="submit-coupon-code">
{{submitBtnText}}
</button>
</div>
<div class="quiqqer-coupons-couponcodeinput__errorMsg" data-ref="errorMsg"></div>
</div>
\ No newline at end of file
bin/frontend/controls/CouponCodeInput.js
+ 105
− 22
Zeige Datei @ 7e22532c
......@@ -31,16 +31,19 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
Type: 'package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput',
Binds: [
'$submit'
'$submit',
'handleError'
],
initialize: function(options) {
this.parent(options);
this.$Input = null;
this.$ErrorMsgContainer = null;
this.Loader = new QUILoader();
this.$running = false;
this.addEvents({
onInject: this.$onInject
});
......@@ -65,17 +68,42 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
submitBtnText: QUILocale.get(lg, lgPrefix + 'submitBtnText')
}));
this.$ErrorMsgContainer = this.$Elm.querySelector('[data-ref="errorMsg"]');
this.Loader.inject(this.$Elm);
this.$Input = this.$Elm.getElement('input[data-name="code-input"]');
this.$Input = this.$Elm.getElement('[data-ref="code-input"]');
let timeoutId = null;
let previousValue = '';
let currentValue = '';
const keyUpFunc = function(event ){
currentValue = self.$Input.value.trim();
this.$Input.addEvent('keyup', function(event) {
if (event.code === 13) {
clearTimeout(timeoutId);
previousValue = currentValue;
self.$submit();
} else {
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
if (
(currentValue !== previousValue || currentValue === '') &&
self.$ErrorMsgContainer.getAttribute('data-show')
) {
self.hideErrorMessage();
self.resetInvalidInput();
}
previousValue = currentValue;
}, 400);
}
});
};
this.$Input.addEvent('keyup', keyUpFunc);
this.$Elm.getElement('[data-name="submit-coupon-code"]').addEvent('click', function(event) {
this.$Elm.getElement('[data-ref="submit-coupon-code"]').addEvent('click', function(event) {
event.stop();
self.$submit();
});
......@@ -153,12 +181,7 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
this.$running = false;
this.Loader.hide();
}).catch((err) => {
console.error(err);
this.$running = false;
this.Loader.hide();
});
}).catch(self.handleError);
}, {
'package': 'quiqqer/order-simple-checkout',
orderHash: orderHash
......@@ -184,7 +207,7 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
'package': 'quiqqer/order'
});
});
});
}).catch(self.handleError);
}, {
'package': 'quiqqer/order'
});
......@@ -197,18 +220,15 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
OrderProcess.Loader.show();
OrderProcess.getOrder().then(function(orderHash) {
return CouponCodes.addCouponCodeToBasket(code, orderHash);
}).then(function(redeemed) {
self.$running = false;
CouponCodes.addCouponCodeToBasket(code, orderHash).then(() => {
self.$running = false;
if (redeemed === false) {
self.$addCouponCodeToSession(code).then(function() {
OrderProcess.reload();
});
}).catch((err) => {
OrderProcess.Loader.hide();
self.Loader.hide();
return;
}
self.$addCouponCodeToSession(code).then(function() {
OrderProcess.reload();
self.handleError(err);
});
});
},
......@@ -285,6 +305,69 @@ define('package/quiqqer/coupons/bin/frontend/controls/CouponCodeInput', [
});
});
});
},
/**
* Show error message container
* @param msg
*/
showErrorMessage: function( msg) {
if (!msg) {
console.log("no error message provided");
return;
}
if (!this.$ErrorMsgContainer) {
return;
}
this.$ErrorMsgContainer.set('html', msg);
this.$ErrorMsgContainer.setAttribute('data-show', '1');
},
/**
* Hide error message container
*/
hideErrorMessage: function() {
if (!this.$ErrorMsgContainer) {
return;
}
this.$ErrorMsgContainer.removeAttribute('data-show');
},
/**
* Set data-invalid attribute to the input
*/
highlightInvalidInput: function() {
this.$Input.setAttribute('data-invalid', '1');
},
/**
* Remove data-invalid attribute from the input
*/
resetInvalidInput: function() {
this.$Input.removeAttribute('data-invalid');
},
/**
* Handle error message (show error message and highlight invalid input)
*
* @param err
*/
handleError: function(err) {
console.error(err);
if (err.options !== undefined && err.options.message) {
const msg = err.options.message;
this.showErrorMessage(msg);
this.highlightInvalidInput();
}
this.$running = false;
this.Loader.hide();
}
});
});
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab