rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-03-21 12:29:03 +01:00
Code Issues Releases Activity

(inte) cart item error message + responsive

Browse Source
This commit is contained in:
vincent 2022-09-28 17:48:55 +02:00
parent 91b7fb9e6a
commit 05e729fa26
3 changed files with 46 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/frontend/src/javascript/components/cart/store-cart.tsx
View File

@ -209,21 +209,21 @@ const StoreCart: React.FC<StoreCartProps> = ({ onSuccess, onError, currentUser,
*/
const itemError = (item, error) => {
if (error.error === 'is_active' || error.error === 'not_found') {
return <div className='error'>{t('app.public.store_cart.errors.product_not_found')}</div>;
return <div className='error'><p>{t('app.public.store_cart.errors.product_not_found')}</p></div>;
}
if (error.error === 'stock' && error.value === 0) {
return <div className='error'>{t('app.public.store_cart.errors.out_of_stock')}</div>;
return <div className='error'><p>{t('app.public.store_cart.errors.out_of_stock')}</p></div>;
}
if (error.error === 'stock' && error.value > 0) {
return <div className='error'>{t('app.public.store_cart.errors.stock_limit_QUANTITY', { QUANTITY: error.value })}</div>;
return <div className='error'><p>{t('app.public.store_cart.errors.stock_limit_QUANTITY', { QUANTITY: error.value })}</p></div>;
}
if (error.error === 'quantity_min') {
return <div className='error'>{t('app.public.store_cart.errors.quantity_min_QUANTITY', { QUANTITY: error.value })}</div>;
return <div className='error'><p>{t('app.public.store_cart.errors.quantity_min_QUANTITY', { QUANTITY: error.value })}</p></div>;
}
if (error.error === 'amount') {
return <div className='error'>
{t('app.public.store_cart.errors.price_changed_PRICE', { PRICE: `${FormatLib.price(error.value)} / ${t('app.public.store_cart.unit')}` })}
<span onClick={refreshItem(item)}>{t('app.public.store_cart.update_item')}</span>
<p>{t('app.public.store_cart.errors.price_changed_PRICE', { PRICE: `${FormatLib.price(error.value)} / ${t('app.public.store_cart.unit')}` })}</p>
<span className='refresh-btn' onClick={refreshItem(item)}>{t('app.public.store_cart.update_item')}</span>
</div>;
}
};
@ -243,11 +243,9 @@ const StoreCart: React.FC<StoreCartProps> = ({ onSuccess, onError, currentUser,
{item.quantity_min > 1 &&
<span className='min'>{t('app.public.store_cart.minimum_purchase')}{item.quantity_min}</span>
}
<div>
{getItemErrors(item).map(e => {
return itemError(item, e);
})}
</div>
{getItemErrors(item).map(e => {
return itemError(item, e);
})}
</div>
<div className="actions">
<div className='price'>

46
app/frontend/src/stylesheets/modules/cart/store-cart.scss
View File

@ -41,19 +41,28 @@
margin: 0;
@include text-base(600);
}
.min,.error {
.min,.error p {
margin-top: 0.8rem;
@include text-sm;
color: var(--alert);
text-transform: none;
}
.error .refresh-btn {
@extend .fab-button, .is-black;
height: auto;
margin-top: 0.4rem;
padding: 0.4rem 0.8rem;
@include text-sm;
}
}
.actions {
grid-area: 2 / 1 / 3 / 3;
align-self: stretch;
padding: 0.8rem;
display: grid;
grid-auto-flow: column;
justify-content: space-between;
grid-template-columns: min-content min-content;
justify-content: space-evenly;
justify-items: flex-end;
align-items: center;
gap: 2.4rem;
background-color: var(--gray-soft-light);
@ -87,8 +96,7 @@
border-radius: var(--border-radius-sm);
input[type="number"] {
grid-area: 1 / 1 / 3 / 2;
width: 4ch;
min-width: fit-content;
min-width: 4ch;
background-color: transparent;
border: none;
text-align: right;
@ -140,7 +148,7 @@
}
.group {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: 1fr;
gap: 2.4rem;
}
&-info,
@ -220,25 +228,35 @@
}
}
@media (min-width: 640px) {
.actions {
grid-auto-flow: column;
grid-template-columns: 1fr min-content 1fr min-content;
justify-content: stretch;
justify-items: flex-end;
align-items: center;
}
}
@media (min-width: 1024px) {
&-list-item {
.ref { grid-area: 1 / 2 / 2 / 3; }
.actions { grid-area: 2 / 1 / 3 / 4; }
.offer { grid-area: 1 / 3 / 2 / 4; }
.actions { grid-area: 2 / 1 / 3 / 3; }
}
.group { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
&-list-item {
grid-auto-flow: column;
grid-auto-flow: row;
grid-template-columns: min-content 1fr 1fr;
justify-content: space-between;
align-items: center;
.picture { grid-area: auto; }
.ref { grid-area: auto; }
.actions { grid-area: auto; }
.picture { grid-area: 1 / 1 / 2 / 2; }
.ref { grid-area: 1 / 2 / 2 / 3; }
.actions { grid-area: 1 / 3 / 2 / 4; }
.offer {
grid-area: auto;
align-self: flex-start;
grid-area: 2 / 1 / 3 / 4;
justify-self: flex-end;
}
}
}

10
config/locales/app.public.en.yml
View File

@ -436,11 +436,11 @@ en:
checkout_success: "Purchase confirmed. Thanks!"
update_item: "Update"
errors:
product_not_found: "This product is not available, please remove it in cart."
out_of_stock: "This product is out of stock. Please remove this item to before checkout the cart."
stock_limit_QUANTITY: "This product has only {QUANTITY} {QUANTITY, plural, =1{unit} other{units}} in stock, please change the quantity of item."
quantity_min_QUANTITY: "Minimum number of product was changed to {QUANTITY}, please change the quantity of item."
price_changed_PRICE: "The price of product was modified to {PRICE}"
product_not_found: "This product is no longer available, please remove it from your cart."
out_of_stock: "This product is out of stock, please remove it from your cart."
stock_limit_QUANTITY: "Only {QUANTITY} {QUANTITY, plural, =1{unit} other{units}} left in stock, please adjust the quantity of items."
quantity_min_QUANTITY: "Minimum number of product was changed to {QUANTITY}, please adjust the quantity of items."
price_changed_PRICE: "The product price was modified to {PRICE}"
orders_dashboard:
heading: "My orders"
sort: