@weareconceptstudio/account 0.5.4 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/TotalCheckout/index.js +2 -2
- package/dist/modules/cart/CartItems/Item/index.js +18 -7
- package/dist/modules/cart/CartItems/ItemMobile/index.js +14 -6
- package/dist/modules/cart/CartItems/style.js +21 -1
- package/dist/modules/cart/CartTemplate/index.d.ts +1 -2
- package/dist/modules/cart/CartTemplate/index.js +6 -3
- package/dist/modules/order/OrderedItems/Item/index.js +11 -6
- package/dist/modules/order/OrderedItems/ItemMobile/index.js +15 -7
- package/dist/modules/order/OrderedItems/style.js +18 -1
- package/dist/modules/order/OrdersList/Item/index.js +1 -1
- package/dist/modules/order/OrdersList/ItemMobile/index.js +1 -1
- package/dist/modules/order/OrdersList/style.js +2 -2
- package/dist/translations/en.d.ts +1 -0
- package/dist/translations/en.js +1 -0
- package/dist/translations/hy.d.ts +1 -0
- package/dist/translations/hy.js +1 -0
- package/dist/translations/index.d.ts +3 -0
- package/dist/translations/ru.d.ts +1 -0
- package/dist/translations/ru.js +1 -0
- package/package.json +1 -1
|
@@ -45,8 +45,8 @@ const TotalCheckout = memo(({ isShipping, children, confirmation, buttonProps })
|
|
|
45
45
|
React.createElement(GiftComp, null),
|
|
46
46
|
React.createElement(FreeShippingComp, null),
|
|
47
47
|
user ? (React.createElement(CollapseContainer, { className: 'collapse-container-wrapper' },
|
|
48
|
-
React.createElement(
|
|
49
|
-
React.createElement(
|
|
48
|
+
React.createElement(PromoCodeComp, null),
|
|
49
|
+
React.createElement(BalanceComp, null))) : null,
|
|
50
50
|
React.createElement(CommentComp, { isShipping: isShipping }),
|
|
51
51
|
React.createElement(AccountButton, { url: buttonProps.url, btnType: `full-width`, text: buttonProps.text, type: buttonProps.type, disabled: checkoutBtnDisabled, loading: buttonProps.loadingButton, className: `sticky-wrap-btn text-center`, onClick: () => buttonProps.handleClick && buttonProps.handleClick() })))))) : (React.createElement(SkeletonTotalCheckout, null))))));
|
|
52
52
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { memo } from 'react';
|
|
2
|
-
import { handlePriceCheckFunc, Image, Text } from '@weareconceptstudio/core';
|
|
2
|
+
import { handlePriceCheckFunc, Image, Text, useTranslation } from '@weareconceptstudio/core';
|
|
3
3
|
import { AccountButton, AccountCounter } from '../../../../components';
|
|
4
4
|
import { useAccountContext } from '../../../../AccountProvider';
|
|
5
5
|
import { useCheckoutContext } from '../../../checkout';
|
|
@@ -7,7 +7,8 @@ import { defaultIconGift } from '../util';
|
|
|
7
7
|
const Item = memo(({ data, remove, select, isLast, actions }) => {
|
|
8
8
|
const { checkoutData, setCheckGift } = useCheckoutContext();
|
|
9
9
|
const { currency, handleProductClick } = useAccountContext();
|
|
10
|
-
|
|
10
|
+
const { translate } = useTranslation();
|
|
11
|
+
return (React.createElement("div", { className: `item-wrap user-select-none` },
|
|
11
12
|
React.createElement("div", { className: 'line' }),
|
|
12
13
|
React.createElement("div", { className: `item-inner-wrapper` },
|
|
13
14
|
React.createElement("div", { className: `col-item tl-col-1 col-item-1` },
|
|
@@ -15,22 +16,32 @@ const Item = memo(({ data, remove, select, isLast, actions }) => {
|
|
|
15
16
|
data.is_gift ? React.createElement("div", { className: 'wrapper-gift-icon' }, defaultIconGift) : null,
|
|
16
17
|
React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
|
|
17
18
|
React.createElement("div", { className: `col-1-right-wrap` },
|
|
18
|
-
React.createElement(AccountButton, { text: data.product
|
|
19
|
-
data.
|
|
19
|
+
React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize title-btn`, onClick: () => handleProductClick(data.product) }),
|
|
20
|
+
data.color ? (React.createElement("div", { className: `right-first-item-wrap` },
|
|
21
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.general_actions.color` }),
|
|
22
|
+
"\u00A0",
|
|
23
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 capitalize`, text: data.color }))) : data.product.short_info_1 ? (React.createElement("div", { className: `right-first-item-wrap` },
|
|
20
24
|
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.product.short_info_1 }))) : null,
|
|
21
|
-
data.
|
|
25
|
+
data.size ? (React.createElement("div", { className: `right-second-item-wrap` },
|
|
26
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.general_actions.size` }),
|
|
27
|
+
"\u00A0",
|
|
28
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.size }))) : data.product.short_info_2 ? (React.createElement("div", { className: `right-second-item-wrap` },
|
|
22
29
|
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: data.product.short_info_2 }))) : null)),
|
|
23
30
|
React.createElement("div", { className: `col-item tl-col-2` }, select && !data.is_gift ? (React.createElement("div", { className: `select-and-out-of-stock-wrap` }, !data.product.out_of_stock ? (React.createElement(AccountCounter, { productId: data.product.id })) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: 'account.general_actions.outOfStock' })))) : data.is_gift ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift ? (React.createElement(AccountCounter, { maxQty: 1, productId: -1, isGift: data.is_gift })) : (React.createElement(AccountButton, { className: `button-gift`, text: 'account.general_actions.restore', onClick: () => {
|
|
24
31
|
setCheckGift();
|
|
25
32
|
} })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty }))),
|
|
26
33
|
React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, data.product.sale_price && !data.is_gift ? (React.createElement("div", null,
|
|
27
34
|
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-price`, text: handlePriceCheckFunc(data.product.sale_price, currency) }),
|
|
28
|
-
React.createElement(
|
|
35
|
+
React.createElement("div", { className: 'wrapper-discount' },
|
|
36
|
+
data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
|
|
37
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-price1`, text: handlePriceCheckFunc(data.product.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-price2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.product.price, currency) }))),
|
|
29
38
|
React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap` },
|
|
30
39
|
React.createElement("div", { className: `col-item-inner-wrap` },
|
|
31
40
|
React.createElement("div", { className: `flex-end-wrap` }, data.sale_total && !data.is_gift ? (React.createElement("div", null,
|
|
32
41
|
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-total`, text: handlePriceCheckFunc(data.sale_total, currency) }),
|
|
33
|
-
React.createElement(
|
|
42
|
+
React.createElement("div", { className: 'wrapper-discount' },
|
|
43
|
+
data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
|
|
44
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-total1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-total2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency) }))),
|
|
34
45
|
React.createElement("div", { className: `favorite-and-remove-wrap` }, remove && !data.is_gift && (React.createElement("div", { className: `remove-btn-wrap` },
|
|
35
46
|
React.createElement(AccountButton, { btnType: `green-small-text`, className: 'cart-remove-btn', text: 'account.general_actions.remove', onClick: () => actions.delete({ productId: data.product.id }) }))))))),
|
|
36
47
|
isLast ? React.createElement("div", { className: 'line' }) : null));
|
|
@@ -16,14 +16,22 @@ const ItemMobile = memo(({ data, select }) => {
|
|
|
16
16
|
React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
|
|
17
17
|
React.createElement("div", { className: `mobile-info-wrap` },
|
|
18
18
|
React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize mobile-info-wrap-title`, onClick: () => handleProductClick(data.product) }),
|
|
19
|
-
data.
|
|
20
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-
|
|
21
|
-
|
|
22
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1
|
|
19
|
+
data.color ? (React.createElement("div", { className: `mobile-info-item` },
|
|
20
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `account.general_actions.color` }),
|
|
21
|
+
"\u00A0",
|
|
22
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 capitalize`, text: data.color }))) : data.product.short_info_1 ? (React.createElement("div", { className: 'mobile-info-item' },
|
|
23
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-short-info1`, text: data.product.short_info_1 }))) : null,
|
|
24
|
+
data.size ? (React.createElement("div", { className: `mobile-info-item` },
|
|
25
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `account.general_actions.size` }),
|
|
26
|
+
"\u00A0",
|
|
27
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.size }))) : data.product.short_info_2 ? (React.createElement("div", { className: 'mobile-info-item' },
|
|
28
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-short-info2`, text: data.product.short_info_2 }))) : null,
|
|
23
29
|
React.createElement("div", { className: `mobile-total-price-wrap flex-box` },
|
|
24
30
|
data.sale_total && !data.is_gift ? (React.createElement("div", { className: 'mobile-total-price-flex-block' },
|
|
25
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-
|
|
26
|
-
React.createElement(
|
|
31
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-secondary-color2 mobile-total-discounted-price`, text: handlePriceCheckFunc(data.sale_total, currency) }),
|
|
32
|
+
React.createElement("div", { className: 'wrapper-discount' },
|
|
33
|
+
data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
|
|
34
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through mobile-total-price price-discount`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-total-price2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency) })),
|
|
27
35
|
select ? (React.createElement("div", { className: `inner-container` }, !data.product.out_of_stock && !data.is_gift ? (React.createElement(AccountCounter, { productId: data.product.id })) : data.is_gift ? (React.createElement("div", { className: 'wrapper-gift-button' }, checkoutData.checkGift ? (React.createElement(AccountCounter, { maxQty: 1, productId: -1, isGift: data.is_gift })) : (React.createElement(AccountButton, { className: `capitalize button-gift`, text: 'account.general_actions.restore', onClick: () => {
|
|
28
36
|
setCheckGift();
|
|
29
37
|
} })))) : (React.createElement("div", { className: `in-block` },
|
|
@@ -51,6 +51,13 @@ const CartItemsStyle = styled.section `
|
|
|
51
51
|
--account_giftButtonTB: calc(var(--sp2x) - var(--sp0-5x) / 2);
|
|
52
52
|
--account_giftButtonLR: var(--sp2x);
|
|
53
53
|
|
|
54
|
+
.wrapper-discount {
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
align-items: flex-end;
|
|
58
|
+
column-gap: var(--sp1x);
|
|
59
|
+
}
|
|
60
|
+
|
|
54
61
|
.mobile-info-wrap-title {
|
|
55
62
|
a,
|
|
56
63
|
button {
|
|
@@ -647,6 +654,10 @@ const CartItemsStyle = styled.section `
|
|
|
647
654
|
--account_spaceLineMTop: var(--sp2x);
|
|
648
655
|
--account_spaceLineMBot: var(--sp3x);
|
|
649
656
|
}
|
|
657
|
+
|
|
658
|
+
.wrapper-discount {
|
|
659
|
+
column-gap: var(--sp0-5x);
|
|
660
|
+
}
|
|
650
661
|
}
|
|
651
662
|
|
|
652
663
|
@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
|
|
@@ -705,15 +716,24 @@ const CartItemsStyle = styled.section `
|
|
|
705
716
|
.mobile-price-wrap,
|
|
706
717
|
.mobile-total-price-wrap {
|
|
707
718
|
margin-top: var(--sp2x);
|
|
719
|
+
align-items: flex-end;
|
|
708
720
|
}
|
|
709
721
|
|
|
710
722
|
.mobile-price-flex-block,
|
|
711
723
|
.mobile-total-price-flex-block {
|
|
712
724
|
display: flex;
|
|
713
|
-
|
|
725
|
+
flex-direction: column;
|
|
726
|
+
|
|
727
|
+
align-items: flex-start;
|
|
714
728
|
gap: var(--sp0-5x);
|
|
715
729
|
}
|
|
716
730
|
|
|
731
|
+
.wrapper-discount {
|
|
732
|
+
flex-direction: row;
|
|
733
|
+
column-gap: var(--sp0-5x);
|
|
734
|
+
align-items: center;
|
|
735
|
+
}
|
|
736
|
+
|
|
717
737
|
.select-and-out-of-stock-mobile-wrap {
|
|
718
738
|
width: var(--account_cartItemSelectFixedWidth);
|
|
719
739
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export default CartTemplate;
|
|
2
|
-
declare function CartTemplate({ children,
|
|
2
|
+
declare function CartTemplate({ children, checkoutUrl, moreMenu, emptyCartIcon }: {
|
|
3
3
|
children: any;
|
|
4
|
-
actions: any;
|
|
5
4
|
checkoutUrl?: string;
|
|
6
5
|
moreMenu: any;
|
|
7
6
|
emptyCartIcon: any;
|
|
@@ -12,10 +12,10 @@ const leftArrow = (React.createElement("svg", { fill: 'none', viewBox: '0 0 16 1
|
|
|
12
12
|
import CartTemplateStyle from './style';
|
|
13
13
|
//* Skeleton
|
|
14
14
|
import SkeletonCartTemplate from './Skeleton';
|
|
15
|
-
const CartTemplate = ({ children,
|
|
15
|
+
const CartTemplate = ({ children, checkoutUrl = '/checkout/', moreMenu, emptyCartIcon }) => {
|
|
16
16
|
const { shopUrl, useCart } = useAccountContext();
|
|
17
17
|
const { translate } = useTranslation();
|
|
18
|
-
const { items, itemsCount, shippingCost, loading, subtotal, total, freeShippingRange, shippingCostValue } = useCart();
|
|
18
|
+
const { items, itemsCount, shippingCost, loading, subtotal, total, freeShippingRange, shippingCostValue, toggleCartItem, deleteCartItem } = useCart();
|
|
19
19
|
return (React.createElement(Page, { className: 'cart use-account' },
|
|
20
20
|
React.createElement(AccountContainer, { className: `second-version` },
|
|
21
21
|
React.createElement(CartTemplateStyle, null,
|
|
@@ -26,7 +26,10 @@ const CartTemplate = ({ children, actions, checkoutUrl = '/checkout/', moreMenu,
|
|
|
26
26
|
shopUrl ? (React.createElement(AccountButton, { url: shopUrl, btnType: `purple-text`, className: `back-to-shop` },
|
|
27
27
|
leftArrow,
|
|
28
28
|
translate('account.general_actions.backToShop'))) : null,
|
|
29
|
-
React.createElement(CartItems, { data: items, smallFontSize: true,
|
|
29
|
+
React.createElement(CartItems, { data: items, smallFontSize: true, className: `cart-st-wrap`, title: 'account.cart_checkout.myCart', actions: {
|
|
30
|
+
add: toggleCartItem,
|
|
31
|
+
delete: deleteCartItem,
|
|
32
|
+
}, additionalParameters: {
|
|
30
33
|
remove: true,
|
|
31
34
|
select: true,
|
|
32
35
|
horizontalLine: true,
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React, { memo } from 'react';
|
|
2
|
-
import { handlePriceCheckFunc, Image, Text } from '@weareconceptstudio/core';
|
|
2
|
+
import { handlePriceCheckFunc, Image, Text, useTranslation } from '@weareconceptstudio/core';
|
|
3
3
|
import { useAccountContext } from '../../../../AccountProvider';
|
|
4
4
|
import { AccountButton } from '../../../../components';
|
|
5
5
|
import { defaultIconGift } from '../util';
|
|
6
6
|
const Item = memo(({ data }) => {
|
|
7
7
|
const { handleProductClick, currency } = useAccountContext();
|
|
8
|
+
const { translate } = useTranslation();
|
|
8
9
|
return (React.createElement("div", { className: `item-wrap` },
|
|
9
10
|
React.createElement("div", { className: `item-inner-wrapper` },
|
|
10
11
|
React.createElement("div", { className: `col-item tl-col-1 col-item-1 first-col` },
|
|
@@ -12,7 +13,7 @@ const Item = memo(({ data }) => {
|
|
|
12
13
|
data.is_gift ? React.createElement("div", { className: 'wrapper-gift-icon' }, defaultIconGift) : null,
|
|
13
14
|
React.createElement(Image, { src: data.product?.image?.src, alt: data.product?.image?.alt })),
|
|
14
15
|
React.createElement("div", { className: `col-1-right-wrap` },
|
|
15
|
-
React.createElement(AccountButton, { disabled: !data.product, btnType: `green-large-text`, className: `ordered-item-title`, text: data.product?.name || data
|
|
16
|
+
React.createElement(AccountButton, { disabled: !data.product, btnType: `green-large-text`, className: `ordered-item-title`, text: data.product?.name || data?.product_name, onClick: () => data.product && handleProductClick(data.product) }),
|
|
16
17
|
data.color ? (React.createElement("div", { className: `right-first-item-wrap` },
|
|
17
18
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.general_actions.color` }),
|
|
18
19
|
"\u00A0",
|
|
@@ -26,12 +27,16 @@ const Item = memo(({ data }) => {
|
|
|
26
27
|
React.createElement("div", { className: `col-item tl-col-2` },
|
|
27
28
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty })),
|
|
28
29
|
React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, data.sale_price && !data.is_gift ? (React.createElement("div", null,
|
|
29
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right`, text: handlePriceCheckFunc(data.sale_price, currency) }),
|
|
30
|
-
React.createElement(
|
|
30
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right order-sale-price`, text: handlePriceCheckFunc(data.sale_price, currency) }),
|
|
31
|
+
React.createElement("div", { className: 'wrapper-discount' },
|
|
32
|
+
data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
|
|
33
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right order-price1`, text: handlePriceCheckFunc(data.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right order-sale-price`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.price, currency) }))),
|
|
31
34
|
React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap price-block` },
|
|
32
35
|
React.createElement("div", { className: `col-item-inner-wrap` },
|
|
33
36
|
React.createElement("div", { className: `flex-end-wrap` }, data.sale_total && !data.is_gift ? (React.createElement("div", null,
|
|
34
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right`, text: handlePriceCheckFunc(data.sale_total, currency) }),
|
|
35
|
-
React.createElement(
|
|
37
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right order-sale-price`, text: handlePriceCheckFunc(data.sale_total, currency) }),
|
|
38
|
+
React.createElement("div", { className: 'wrapper-discount' },
|
|
39
|
+
data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
|
|
40
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right order-price1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right order-sale-price`, text: `${handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency)}` }))))))));
|
|
36
41
|
});
|
|
37
42
|
export default Item;
|
|
@@ -12,16 +12,16 @@ const ItemMobile = memo(({ data }) => {
|
|
|
12
12
|
data.is_gift ? React.createElement("div", { className: 'wrapper-gift-icon' }, defaultIconGift) : null,
|
|
13
13
|
React.createElement(Image, { src: data.product?.image?.src, alt: data.product?.image?.alt })),
|
|
14
14
|
React.createElement("div", { className: `mobile-info-wrap` },
|
|
15
|
-
React.createElement(AccountButton, { disabled: !data.product, btnType: `green-large-text`, className: `ordered-item-mobile-title`, text: data.product?.name || data
|
|
15
|
+
React.createElement(AccountButton, { disabled: !data.product, btnType: `green-large-text`, className: `ordered-item-mobile-title`, text: data.product?.name || data?.product_name, onClick: () => data.product && handleProductClick(data.product) }),
|
|
16
16
|
data.color ? (React.createElement("div", { className: `mobile-info-item` },
|
|
17
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-
|
|
17
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `account.general_actions.color` }),
|
|
18
18
|
"\u00A0",
|
|
19
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-
|
|
19
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 capitalize`, text: data.color }))) : data.product?.short_info_1 ? (React.createElement("div", { className: `mobile-info-item` },
|
|
20
20
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.product.short_info_1 }))) : null,
|
|
21
21
|
data.size ? (React.createElement("div", { className: `mobile-info-item` },
|
|
22
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-
|
|
22
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: `account.general_actions.size` }),
|
|
23
23
|
"\u00A0",
|
|
24
|
-
React.createElement(Text, { className: `account-p account-p3 account-font-
|
|
24
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.size }))) : data.product?.short_info_2 ? (React.createElement("div", { className: `mobile-info-item` },
|
|
25
25
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.product.short_info_2 }))) : null,
|
|
26
26
|
React.createElement("div", { className: `mobile-info-item` },
|
|
27
27
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1` },
|
|
@@ -31,9 +31,17 @@ const ItemMobile = memo(({ data }) => {
|
|
|
31
31
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty })),
|
|
32
32
|
React.createElement("div", { className: `mobile-price-wrap nowrap` },
|
|
33
33
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.order_balance.price` }),
|
|
34
|
-
|
|
34
|
+
data.sale_price && !data.is_gift ? (React.createElement(React.Fragment, null,
|
|
35
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-secondary-color2 sale-price`, text: handlePriceCheckFunc(data.sale_price, currency) }),
|
|
36
|
+
React.createElement("div", { className: 'wrapper-discount' },
|
|
37
|
+
data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text-mobile` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
|
|
38
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through price1`, text: handlePriceCheckFunc(data.price, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 price2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.price, currency) }))),
|
|
35
39
|
React.createElement("div", { className: `mobile-total-price-wrap nowrap` },
|
|
36
40
|
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: `account.order_balance.total` }),
|
|
37
|
-
|
|
41
|
+
data.sale_total && !data.is_gift ? (React.createElement(React.Fragment, null,
|
|
42
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-medium account-secondary-color2 sale-total`, text: handlePriceCheckFunc(data.sale_total, currency) }),
|
|
43
|
+
React.createElement("div", { className: 'wrapper-discount' },
|
|
44
|
+
data.discount ? React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color2 discount-text-mobile` }, translate('account.order_balance.discountWithSymbol', { discount: data.discount })) : null,
|
|
45
|
+
React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through total1`, text: handlePriceCheckFunc(data.total, currency) })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 total2`, text: handlePriceCheckFunc(data.is_gift ? 0 : data.total, currency) })))))));
|
|
38
46
|
});
|
|
39
47
|
export default ItemMobile;
|
|
@@ -366,6 +366,13 @@ const OrderedItemsStyle = styled.div `
|
|
|
366
366
|
}
|
|
367
367
|
}
|
|
368
368
|
|
|
369
|
+
.wrapper-discount {
|
|
370
|
+
display: flex;
|
|
371
|
+
flex-direction: column;
|
|
372
|
+
align-items: flex-end;
|
|
373
|
+
column-gap: var(--sp1x);
|
|
374
|
+
}
|
|
375
|
+
|
|
369
376
|
@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
|
|
370
377
|
--account_orderItemsMarginTop: var(--sp11x);
|
|
371
378
|
--account_spaceLineMarginTop: var(--sp2x);
|
|
@@ -605,7 +612,7 @@ const OrderedItemsStyle = styled.div `
|
|
|
605
612
|
|
|
606
613
|
//! Col's width
|
|
607
614
|
--account_col1Width: 44%;
|
|
608
|
-
--account_col2Width:
|
|
615
|
+
--account_col2Width: 13%;
|
|
609
616
|
--account_col3Width: 20%;
|
|
610
617
|
|
|
611
618
|
//! Col's distance
|
|
@@ -637,6 +644,10 @@ const OrderedItemsStyle = styled.div `
|
|
|
637
644
|
--account_giftWrapperBorder: var(--sp0-5x);
|
|
638
645
|
--account_giftButtonTB: var(--sp1x);
|
|
639
646
|
--account_giftButtonLR: var(--sp2x);
|
|
647
|
+
|
|
648
|
+
.wrapper-discount {
|
|
649
|
+
column-gap: var(--sp0-5x);
|
|
650
|
+
}
|
|
640
651
|
}
|
|
641
652
|
|
|
642
653
|
@media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
|
|
@@ -713,6 +724,12 @@ const OrderedItemsStyle = styled.div `
|
|
|
713
724
|
.mobile-price-wrap,
|
|
714
725
|
.mobile-total-price-wrap {
|
|
715
726
|
margin-top: var(--sp3x);
|
|
727
|
+
|
|
728
|
+
.wrapper-discount {
|
|
729
|
+
flex-direction: row;
|
|
730
|
+
align-items: center;
|
|
731
|
+
gap: var(--sp0-5x);
|
|
732
|
+
}
|
|
716
733
|
}
|
|
717
734
|
}
|
|
718
735
|
}
|
|
@@ -17,6 +17,6 @@ const OrderItem = memo(({ data }) => {
|
|
|
17
17
|
React.createElement("div", { className: `col-item od-col-5 nowrap` },
|
|
18
18
|
React.createElement(Text, { className: `account-p account-p4 account-font-medium account-primary-color1`, text: handlePriceCheckFunc(data.total, currency) })),
|
|
19
19
|
React.createElement("div", { className: `col-item od-col-6 nowrap` },
|
|
20
|
-
React.createElement(AccountButton, {
|
|
20
|
+
React.createElement(AccountButton, { btnType: `green-small-text`, url: `/account/order-history/${data.id}`, text: 'account.order_management.viewOrder' }))));
|
|
21
21
|
});
|
|
22
22
|
export default OrderItem;
|
|
@@ -6,7 +6,7 @@ import OrderStatus from '../../OrderStatus';
|
|
|
6
6
|
const ItemMobile = memo(({ data }) => {
|
|
7
7
|
const { currency } = useAccountContext();
|
|
8
8
|
const { translate } = useTranslation();
|
|
9
|
-
return (React.createElement("div", { className: `mobile-
|
|
9
|
+
return (React.createElement("div", { className: `mobile-orders-list-wrap` },
|
|
10
10
|
React.createElement("div", { className: `first-col-wrap` },
|
|
11
11
|
React.createElement("div", { className: `left-wrap` },
|
|
12
12
|
React.createElement("div", { className: `left-item-wrap` },
|
|
@@ -138,7 +138,7 @@ const OrdersListStyle = styled.section `
|
|
|
138
138
|
|
|
139
139
|
//! Coll width
|
|
140
140
|
--account_orderDateWidth: 16%;
|
|
141
|
-
--account_totalItemsWidth:
|
|
141
|
+
--account_totalItemsWidth: 11.7%;
|
|
142
142
|
--account_orderNumberWidth: 16%;
|
|
143
143
|
--account_orderStatusWidth: 16.7%;
|
|
144
144
|
--account_totalPriceWidth: 22%;
|
|
@@ -316,7 +316,7 @@ const OrdersListStyle = styled.section `
|
|
|
316
316
|
--account_paginationWrapMTop: var(--sp3x);
|
|
317
317
|
|
|
318
318
|
.mobile-orders-wrap {
|
|
319
|
-
.mobile-
|
|
319
|
+
.mobile-orders-list-wrap {
|
|
320
320
|
padding-bottom: var(--sp3x);
|
|
321
321
|
border-bottom: 2px solid var(--account_primaryColor5);
|
|
322
322
|
|
package/dist/translations/en.js
CHANGED
package/dist/translations/hy.js
CHANGED
|
@@ -214,6 +214,7 @@ declare const _default: {
|
|
|
214
214
|
reorder: string;
|
|
215
215
|
comment: string;
|
|
216
216
|
discount: string;
|
|
217
|
+
discountWithSymbol: string;
|
|
217
218
|
note: string;
|
|
218
219
|
};
|
|
219
220
|
balance_promotions: {
|
|
@@ -453,6 +454,7 @@ declare const _default: {
|
|
|
453
454
|
reorder: string;
|
|
454
455
|
comment: string;
|
|
455
456
|
discount: string;
|
|
457
|
+
discountWithSymbol: string;
|
|
456
458
|
note: string;
|
|
457
459
|
};
|
|
458
460
|
balance_promotions: {
|
|
@@ -693,6 +695,7 @@ declare const _default: {
|
|
|
693
695
|
reorder: string;
|
|
694
696
|
comment: string;
|
|
695
697
|
discount: string;
|
|
698
|
+
discountWithSymbol: string;
|
|
696
699
|
note: string;
|
|
697
700
|
};
|
|
698
701
|
balance_promotions: {
|
package/dist/translations/ru.js
CHANGED