@weareconceptstudio/account 0.4.9 → 0.5.1

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.
Files changed (19) hide show
  1. package/dist/components/AccountCounter/style.js +23 -4
  2. package/dist/components/TotalCheckout/PromoCodeComp/index.js +2 -2
  3. package/dist/modules/cart/SimpleItems/Item/index.js +13 -23
  4. package/dist/modules/cart/SimpleItems/Item/util.d.ts +2 -0
  5. package/dist/modules/cart/SimpleItems/Item/util.js +3 -0
  6. package/dist/modules/cart/SimpleItems/ItemMobile/index.js +12 -9
  7. package/dist/modules/cart/SimpleItems/index.js +2 -2
  8. package/dist/modules/cart/SimpleItems/style.js +95 -4
  9. package/dist/modules/checkout/CheckoutProvider.js +13 -3
  10. package/dist/modules/checkout/CheckoutTemplate/index.js +16 -16
  11. package/dist/styles/variables.js +1 -1
  12. package/dist/translations/en.d.ts +1 -0
  13. package/dist/translations/en.js +1 -0
  14. package/dist/translations/hy.d.ts +1 -0
  15. package/dist/translations/hy.js +1 -0
  16. package/dist/translations/index.d.ts +3 -0
  17. package/dist/translations/ru.d.ts +1 -0
  18. package/dist/translations/ru.js +1 -0
  19. package/package.json +1 -1
package/dist/components/AccountCounter/style.js CHANGED
@@ -5,19 +5,26 @@ const AccountCounterStyle = styled.div `
5
5
  --account_counterHeight: var(--sp3x);
6
6
  --account_counterIconSize: var(--sp1-5x);
7
7
 
8
+ --account_counterButtonSize: calc(var(--sp4x) - var(--sp0-5x) / 2);
9
+ --account_distanceItemCounter: var(--sp0-5x);
10
+
8
11
  width: var(--account_counterWidth);
9
12
  height: var(--account_counterHeight);
10
13
  display: flex;
11
14
  transition: opacity var(--account_trTime) ease-out;
12
15
 
13
16
  .counter {
14
- width: 100%;
17
+ width: fit-content;
15
18
  display: flex;
16
19
  align-items: center;
17
20
  justify-content: space-between;
21
+ gap: var(--account_distanceItemCounter);
18
22
 
19
23
  .count {
20
24
  color: var(--backgroundColor);
25
+ text-align: center;
26
+ min-width: var(--account_counterButtonSize);
27
+ line-height: 1;
21
28
  }
22
29
 
23
30
  svg {
@@ -35,9 +42,8 @@ const AccountCounterStyle = styled.div `
35
42
  display: flex;
36
43
  align-items: center;
37
44
  justify-content: center;
38
-
39
- width: var(--sp3x);
40
- height: var(--sp3x);
45
+ width: var(--account_counterButtonSize);
46
+ height: var(--account_counterButtonSize);
41
47
  background-color: #f7f8f9;
42
48
  border-radius: 50%;
43
49
 
@@ -50,30 +56,43 @@ const AccountCounterStyle = styled.div `
50
56
 
51
57
  /* //! 1920 */
52
58
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
59
+ --account_counterButtonSize: var(--sp3x);
60
+ --account_distanceItemCounter: var(--sp0-5x);
53
61
  }
54
62
 
55
63
  /* //! 1510 */
56
64
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
65
+ --account_counterButtonSize: var(--sp3x);
66
+ --account_distanceItemCounter: var(--sp0-5x);
57
67
  }
58
68
 
59
69
  /* //! 1440 */
60
70
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
71
+ --account_counterButtonSize: var(--sp3x);
72
+ --account_distanceItemCounter: var(--sp0-5x);
61
73
  }
62
74
 
63
75
  /* //! 1280 */
64
76
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
77
+ --account_counterButtonSize: var(--sp3x);
78
+ --account_distanceItemCounter: var(--sp0-5x);
65
79
  }
66
80
 
67
81
  /* //! 1024 */
68
82
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
83
+ --account_counterButtonSize: var(--sp3x);
69
84
  }
70
85
 
71
86
  /* //! 768 */
72
87
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
88
+ --account_counterButtonSize: var(--sp3x);
89
+ --account_distanceItemCounter: calc(var(--sp0-5x) / 2);
73
90
  }
74
91
 
75
92
  /* //! Mobile */
76
93
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
94
+ --account_counterButtonSize: var(--sp3x);
95
+ --account_distanceItemCounter: calc(var(--sp0-5x) / 2);
77
96
  }
78
97
  `;
79
98
  export default AccountCounterStyle;
package/dist/components/TotalCheckout/PromoCodeComp/index.js CHANGED
@@ -15,10 +15,10 @@ const PromoCodeComp = ({ isPromoCode = true, promotionHandler, usePromotion, get
15
15
  promotionHandler(values.promo_code);
16
16
  };
17
17
  const promotions = useMemo(() => {
18
- return appliedPromotions.map((promotion) => React.createElement(AppliedPromotion, { ...promotion }));
18
+ return appliedPromotions?.map((promotion) => React.createElement(AppliedPromotion, { ...promotion }));
19
19
  }, [appliedPromotions]);
20
20
  return isPromoCode ? (React.createElement(PromoCodeCompStyle, { className: `collapse-distance ${getItemCount ? '' : 'disable'}` },
21
- React.createElement(CollapseItem, { status: appliedPromotions.length ? 'open' : 'closed', disable: disable, title: React.createElement(React.Fragment, null,
21
+ React.createElement(CollapseItem, { status: appliedPromotions?.length ? 'open' : 'closed', disable: disable, title: React.createElement(React.Fragment, null,
22
22
  React.createElement("div", { className: 'inner-wrapper-icon' },
23
23
  React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '12', height: '12', viewBox: '0 0 12 12', fill: 'none' },
24
24
  React.createElement("path", { d: 'M0 6H12', stroke: 'black', strokeWidth: '2' }),
package/dist/modules/cart/SimpleItems/Item/index.js CHANGED
@@ -1,24 +1,16 @@
1
- import React, { memo, useMemo } from 'react';
1
+ import React, { memo } from 'react';
2
2
  import { handlePriceCheckFunc, Image, Text } from '@weareconceptstudio/core';
3
- import { Select } from '@weareconceptstudio/form';
4
- import { AccountButton } from '../../../../components';
3
+ import { AccountButton, AccountCounter } from '../../../../components';
5
4
  import { useAccountContext } from '../../../../AccountProvider';
6
- const Item = memo(({ data, remove, select, isLast, actions, maxQty, currency }) => {
5
+ import { defaultIconGift } from './util';
6
+ const Item = memo(({ data, remove, select, isLast, actions, currency, isGift, giftIcon }) => {
7
7
  const { handleProductClick } = useAccountContext();
8
- const selectionList = useMemo(() => {
9
- if (select) {
10
- const selectList = [];
11
- for (let index = 1; index <= maxQty; index++) {
12
- selectList.push({ id: index, name: index });
13
- }
14
- return selectList;
15
- }
16
- }, [data, select, maxQty]);
17
- return (React.createElement("div", { className: `item-wrap` },
8
+ return (React.createElement("div", { className: `${isGift ? 'item-gift-wrap' : 'item-wrap'}` },
18
9
  React.createElement("div", { className: 'line' }),
19
- React.createElement("div", { className: `item-inner-wrapper` },
10
+ React.createElement("div", { className: `${isGift ? 'item-gift-inner-wrapper' : 'item-inner-wrapper'}` },
20
11
  React.createElement("div", { className: `col-item tl-col-1 col-item-1` },
21
12
  React.createElement("div", { className: `image-wrapper` },
13
+ isGift ? giftIcon ? giftIcon : React.createElement("div", { className: 'wrapper-gift-icon' }, defaultIconGift) : null,
22
14
  React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
23
15
  React.createElement("div", { className: `col-1-right-wrap` },
24
16
  React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize title-btn`, onClick: () => handleProductClick(data.product) }),
@@ -26,19 +18,17 @@ const Item = memo(({ data, remove, select, isLast, actions, maxQty, currency })
26
18
  React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1`, text: data.product.short_info_1 })),
27
19
  React.createElement("div", { className: `right-second-item-wrap` },
28
20
  React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1`, text: data.product.short_info_2 })))),
29
- React.createElement("div", { className: `col-item tl-col-2` }, select ? (React.createElement("div", { className: `select-and-out-of-stock-wrap` }, !data.product?.out_of_stock ? (React.createElement(Select, { value: data.qty, options: selectionList, onChange: (val) => actions.add({
30
- qty: val,
31
- productId: data.product.id,
32
- }) })) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty })))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty }))),
21
+ React.createElement("div", { className: `col-item tl-col-2` }, select && !isGift ? (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: data.qty })))) : isGift ? (React.createElement("div", { className: 'wrapper-gift-button' },
22
+ React.createElement(AccountButton, { text: 'account.cart_checkout.restore', className: `button-gift` }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1`, text: data.qty }))),
33
23
  React.createElement("div", { className: `col-item tl-col-3 col-item-3 nowrap` }, data.product?.sale_price ? (React.createElement("div", null,
34
24
  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) }),
35
- 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.product.price, currency) }))),
25
+ 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(isGift ? 0 : data.product.price, currency) }))),
36
26
  React.createElement("div", { className: `col-item tl-col-4 col-item-4 nowrap` },
37
27
  React.createElement("div", { className: `col-item-inner-wrap` },
38
- React.createElement("div", { className: `flex-end-wrap` }, data.product?.sale_price ? (React.createElement("div", null,
28
+ React.createElement("div", { className: `flex-end-wrap` }, data.product?.sale_price && !isGift ? (React.createElement("div", null,
39
29
  React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 align-right cart-sale-total`, text: `${data.sale_total} ${currency}` }),
40
- React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-total1`, text: handlePriceCheckFunc(data.product.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-total2`, text: `${data.total} ${currency}` }))),
41
- React.createElement("div", { className: `favorite-and-remove-wrap` }, remove && (React.createElement("div", { className: `remove-btn-wrap` },
30
+ React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value align-right cart-total1`, text: handlePriceCheckFunc(data.product.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 align-right cart-total2`, text: `${isGift ? 0 : data.total} ${currency}` }))),
31
+ React.createElement("div", { className: `favorite-and-remove-wrap` }, remove && !isGift && (React.createElement("div", { className: `remove-btn-wrap` },
42
32
  React.createElement(AccountButton, { text: 'account.general_actions.remove', btnType: `green-small-text`, className: 'cart-remove-btn', onClick: () => actions.delete({ productId: data.product?.id }) }))))))),
43
33
  isLast ? React.createElement("div", { className: 'line' }) : null));
44
34
  });
package/dist/modules/cart/SimpleItems/Item/util.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export const defaultIconGift: React.JSX.Element;
2
+ import React from 'react';
package/dist/modules/cart/SimpleItems/Item/util.js ADDED
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ export const defaultIconGift = (React.createElement("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '14', height: '14', viewBox: '0 0 14 14', fill: 'none' },
3
+ React.createElement("path", { d: 'M7.78672 13.4663H11.846C12.1064 13.2066 12.252 13.061 12.5117 12.8006V7.95381H7.78672V13.4663ZM1.48672 7.95381V12.8006C1.74642 13.061 1.89202 13.2066 2.15242 13.4663H6.21172V7.95381H1.48672ZM9.55842 1.71471C10.418 1.71471 11.0186 2.81441 10.033 3.68381H7.75452L8.61202 2.22571C8.79752 1.90931 9.13772 1.71471 9.50452 1.71471H9.55842ZM2.33932 2.16341C2.20492 2.71431 2.28612 3.24281 2.51012 3.68381H1.36492C1.10452 3.94351 0.958919 4.08911 0.699219 4.34881V6.16811C0.958919 6.42781 1.10452 6.57341 1.36492 6.83381H12.6335C12.8939 6.57341 13.0395 6.42781 13.2992 6.16811V4.34881C13.0395 4.08911 12.8939 3.94351 12.6335 3.68381H11.4883C11.7123 3.24281 11.7935 2.71431 11.6591 2.16341C11.4211 1.19041 10.5076 0.53381 9.50662 0.53381H9.50452C8.71912 0.53381 7.99112 0.94961 7.59212 1.62651L6.99922 2.63731L6.40632 1.62861C6.00732 0.950311 5.27932 0.53381 4.49182 0.53381C3.49082 0.53381 2.57732 1.19041 2.33932 2.16341ZM5.38712 2.22641L6.24392 3.68381H3.96542C2.97982 2.81441 3.58042 1.71471 4.44002 1.71471H4.49392C4.86072 1.71471 5.20302 1.90931 5.38712 2.22641Z', fill: 'white' })));
package/dist/modules/cart/SimpleItems/ItemMobile/index.js CHANGED
@@ -1,9 +1,9 @@
1
- import React, { memo, useMemo } from 'react';
1
+ import React, { memo } from 'react';
2
2
  import { handlePriceCheckFunc, Image, Text, useTranslation } from '@weareconceptstudio/core';
3
- import { Select } from '@weareconceptstudio/form';
4
3
  import { AccountButton, AccountCounter } from '../../../../components';
5
4
  import { useAccountContext } from '../../../../AccountProvider';
6
- const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) => {
5
+ import { defaultIconGift } from '../Item/util';
6
+ const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency, isGift, giftIcon }) => {
7
7
  const { handleProductClick } = useAccountContext();
8
8
  const { translate } = useTranslation();
9
9
  // const selectionList = useMemo(() => {
@@ -16,19 +16,20 @@ const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) =>
16
16
  // }
17
17
  // }, [data, select, maxQty]);
18
18
  return (React.createElement(React.Fragment, null,
19
- React.createElement("div", { className: `mobile-order-item-wrap user-select-none` },
20
- React.createElement("div", { className: `mobile-order-item-inner-wrap` },
19
+ React.createElement("div", { className: `${isGift ? 'mobile-order-item-gift-wrap' : 'mobile-order-item-wrap'} user-select-none` },
20
+ React.createElement("div", { className: `${isGift ? 'mobile-order-item-gift-inner-wrap' : 'mobile-order-item-inner-wrap'}` },
21
21
  React.createElement("div", { className: `mobile-image-wrap` },
22
+ isGift ? giftIcon ? giftIcon : React.createElement("div", { className: 'wrapper-gift-icon' }, defaultIconGift) : null,
22
23
  React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
23
24
  React.createElement("div", { className: `mobile-info-wrap` },
24
25
  React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize mobile-info-wrap-title`, onClick: () => handleProductClick(data.product) }),
25
26
  React.createElement("div", { className: 'mobile-info-item' },
26
27
  React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 mobile-short-info1`, text: data.product.short_info_1 })),
27
28
  React.createElement("div", { className: `mobile-total-price-wrap nowrap flex-box` },
28
- data.product?.sale_price ? (React.createElement("div", { className: 'mobile-total-price-flex-block' },
29
+ data.product?.sale_price && !isGift ? (React.createElement("div", { className: 'mobile-total-price-flex-block' },
29
30
  React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 mobile-total-discounted-price`, text: `${data.sale_total} ${currency}` }),
30
- React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through mobile-total-price`, text: handlePriceCheckFunc(data.product.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 mobile-total-price2`, text: `${data.total} ${currency}` })),
31
- select ? (React.createElement("div", { className: `inner-container` }, !data.product?.out_of_stock ? (React.createElement(AccountCounter, { productId: data?.product.id })) : (React.createElement("div", { className: `in-block` },
31
+ React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through mobile-total-price`, text: handlePriceCheckFunc(data.product.price * data.qty, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 mobile-total-price2`, text: `${isGift ? 0 : data.total} ${currency}` })),
32
+ select ? (React.createElement("div", { className: `inner-container` }, !data.product?.out_of_stock && !isGift ? (React.createElement(AccountCounter, { productId: data?.product.id })) : isGift ? null : (React.createElement("div", { className: `in-block` },
32
33
  React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity-with-symbol` },
33
34
  translate('account.order_balance.quantity'),
34
35
  ":"),
@@ -38,7 +39,9 @@ const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) =>
38
39
  translate('account.order_balance.quantity'),
39
40
  ":"),
40
41
  "\u00A0",
41
- React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity2`, text: data.qty }))))))),
42
+ React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity2`, text: data.qty }))),
43
+ isGift ? (React.createElement("div", { className: 'wrapper-gift-button' },
44
+ React.createElement(AccountButton, { text: 'account.cart_checkout.restore', className: `capitalize button-gift` }))) : null)))),
42
45
  React.createElement("div", { className: 'line' })));
43
46
  });
44
47
  export default ItemMobile;
package/dist/modules/cart/SimpleItems/index.js CHANGED
@@ -24,11 +24,11 @@ const CartItems = memo(({ data, className, title, smallFontSize, additionalParam
24
24
  React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 nowrap align-right`, text: `account.order_balance.total` }))),
25
25
  React.createElement("div", { className: `items-wrap` }, data?.length > 0
26
26
  ? data.map((item, index) => {
27
- return (React.createElement(Item, { key: index, data: item, maxQty: maxQty, actions: actions, currency: currency, isLast: data.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item }));
27
+ return (React.createElement(Item, { isGift: item.is_gift, key: index, data: item, maxQty: maxQty, actions: actions, currency: currency, isLast: data.length - 1 == index, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item }));
28
28
  })
29
29
  : null))) : (React.createElement("div", { className: `mobile-order-items-table-wrap` }, data?.length > 0
30
30
  ? data.map((item, index) => {
31
- return (React.createElement(ItemMobile, { key: index, data: item, maxQty: maxQty, actions: actions, currency: currency, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item }));
31
+ return (React.createElement(ItemMobile, { isGift: item.is_gift, key: index, data: item, maxQty: maxQty, actions: actions, currency: currency, select: additionalParameters.select, remove: additionalParameters.remove, edit: additionalParameters.edit.item }));
32
32
  })
33
33
  : null));
34
34
  }, [winWidth, data, additionalParameters, currency, actions, maxQty]);
package/dist/modules/cart/SimpleItems/style.js CHANGED
@@ -42,6 +42,15 @@ const CartItemsStyle = styled.section `
42
42
 
43
43
  --account_cartItemSelectFixedWidth: calc(var(--sp9x) + var(--sp0-5x));
44
44
 
45
+ --account_giftIconDistanceIconPTB: var(--sp0-5x);
46
+ --account_giftIconDistanceIconPLR: var(--sp0-5x);
47
+ --account_giftIconDistanceIconMTB: var(--sp0-5x);
48
+ --account_giftIconDistanceIconMLR: var(--sp0-5x);
49
+ --account_giftWrapperBorder: calc(var(--sp0-5x) + var(--sp0-5x) / 2);
50
+ --account_giftSizeIcon: var(--sp2x);
51
+ --account_giftButtonTB: calc(var(--sp2x) - var(--sp0-5x) / 2);
52
+ --account_giftButtonLR: var(--sp2x);
53
+
45
54
  .mobile-info-wrap-title {
46
55
  a,
47
56
  button {
@@ -78,12 +87,14 @@ const CartItemsStyle = styled.section `
78
87
  }
79
88
 
80
89
  .items-wrap {
81
- .item-wrap {
90
+ .item-wrap,
91
+ .item-gift-wrap {
82
92
  display: flex;
83
93
  flex-direction: column;
84
94
 
85
95
  .col-item {
86
96
  .image-wrapper {
97
+ position: relative;
87
98
  overflow: hidden;
88
99
  max-width: var(--account_imageWidth);
89
100
  width: 100%;
@@ -97,7 +108,8 @@ const CartItemsStyle = styled.section `
97
108
  }
98
109
  }
99
110
 
100
- .item-inner-wrapper {
111
+ .item-inner-wrapper,
112
+ .item-gift-inner-wrapper {
101
113
  display: flex;
102
114
  padding: var(--account_itemWrapPadTB) 0;
103
115
  }
@@ -268,6 +280,42 @@ const CartItemsStyle = styled.section `
268
280
  }
269
281
  }
270
282
 
283
+ .wrapper-gift-icon {
284
+ padding: var(--account_giftIconDistanceIconPTB) var(--account_giftIconDistanceIconPLR);
285
+ margin: var(--account_giftIconDistanceIconMTB) var(--account_giftIconDistanceIconMLR);
286
+ position: absolute;
287
+ z-index: 1;
288
+ width: fit-content;
289
+ height: fit-content;
290
+ display: flex;
291
+ top: 0;
292
+ background-color: var(--account_secondaryColor9);
293
+ border-radius: var(--account_giftWrapperBorder);
294
+
295
+ svg {
296
+ width: var(--account_giftSizeIcon);
297
+ height: auto;
298
+ }
299
+ }
300
+
301
+ .button-gift {
302
+ --account_btnPadTB: var(--account_giftButtonTB);
303
+ --account_btnPadLR: var(--account_giftButtonLR);
304
+
305
+ button {
306
+ font-size: var(--account_p4);
307
+ font-weight: 500;
308
+
309
+ :first-letter {
310
+ text-transform: uppercase;
311
+ }
312
+
313
+ &:hover {
314
+ border: unset;
315
+ }
316
+ }
317
+ }
318
+
271
319
  .flex-box {
272
320
  display: flex;
273
321
  flex-wrap: wrap;
@@ -339,6 +387,10 @@ const CartItemsStyle = styled.section `
339
387
 
340
388
  --account_outOfStockMBot: var(--sp3x);
341
389
 
390
+ --account_giftWrapperBorder: var(--sp0-5x);
391
+ --account_giftButtonTB: var(--sp1x);
392
+ --account_giftButtonLR: var(--sp2x);
393
+
342
394
  &.cart-st-wrap {
343
395
  --account_spaceLineMTop: var(--sp2x);
344
396
  --account_spaceLineMBot: var(--sp5x);
@@ -383,6 +435,10 @@ const CartItemsStyle = styled.section `
383
435
 
384
436
  --account_outOfStockMBot: var(--sp3x);
385
437
 
438
+ --account_giftWrapperBorder: var(--sp0-5x);
439
+ --account_giftButtonTB: var(--sp1x);
440
+ --account_giftButtonLR: var(--sp2x);
441
+
386
442
  &.cart-st-wrap {
387
443
  --account_spaceLineMTop: var(--sp2x);
388
444
  --account_spaceLineMBot: var(--sp4x);
@@ -427,6 +483,10 @@ const CartItemsStyle = styled.section `
427
483
 
428
484
  --account_outOfStockMBot: var(--sp3x);
429
485
 
486
+ --account_giftWrapperBorder: var(--sp0-5x);
487
+ --account_giftButtonTB: var(--sp1x);
488
+ --account_giftButtonLR: var(--sp2x);
489
+
430
490
  &.cart-st-wrap {
431
491
  --account_spaceLineMTop: var(--sp2x);
432
492
  --account_spaceLineMBot: var(--sp4x);
@@ -471,6 +531,13 @@ const CartItemsStyle = styled.section `
471
531
  --account_titleEditWrapperMBot: var(--sp4x);
472
532
 
473
533
  --account_outOfStockMBot: var(--sp3x);
534
+ --account_giftSizeIcon: calc(var(--sp2x) - var(--sp0-5x) / 2);
535
+ --account_giftIconDistanceIconPTB: calc(var(--sp0-5x) / 2);
536
+ --account_giftIconDistanceIconPLR: calc(var(--sp0-5x) / 2);
537
+
538
+ --account_giftWrapperBorder: var(--sp0-5x);
539
+ --account_giftButtonTB: var(--sp1x);
540
+ --account_giftButtonLR: var(--sp2x);
474
541
 
475
542
  &.cart-st-wrap {
476
543
  --account_spaceLineMTop: var(--sp2x);
@@ -518,6 +585,13 @@ const CartItemsStyle = styled.section `
518
585
 
519
586
  --account_outOfStockMBot: var(--sp3x);
520
587
 
588
+ --account_giftSizeIcon: calc(var(--sp2x) - var(--sp0-5x) / 2);
589
+ --account_giftIconDistanceIconPTB: calc(var(--sp0-5x) / 2);
590
+ --account_giftIconDistanceIconPLR: calc(var(--sp0-5x) / 2);
591
+ --account_giftWrapperBorder: var(--sp0-5x);
592
+ --account_giftButtonTB: var(--sp1x);
593
+ --account_giftButtonLR: var(--sp2x);
594
+
521
595
  &.cart-st-wrap {
522
596
  --account_spaceLineMTop: var(--sp2x);
523
597
  --account_spaceLineMBot: var(--sp3x);
@@ -563,6 +637,13 @@ const CartItemsStyle = styled.section `
563
637
 
564
638
  --account_outOfStockMBot: var(--sp2-5x);
565
639
 
640
+ --account_giftSizeIcon: calc(var(--sp2x) - var(--sp0-5x) / 2);
641
+ --account_giftIconDistanceIconPTB: calc(var(--sp0-5x) / 2);
642
+ --account_giftIconDistanceIconPLR: calc(var(--sp0-5x) / 2);
643
+ --account_giftWrapperBorder: var(--sp0-5x);
644
+ --account_giftButtonTB: var(--sp1x);
645
+ --account_giftButtonLR: var(--sp2x);
646
+
566
647
  &.cart-st-wrap {
567
648
  --account_spaceLineMTop: var(--sp2x);
568
649
  --account_spaceLineMBot: var(--sp3x);
@@ -579,18 +660,28 @@ const CartItemsStyle = styled.section `
579
660
 
580
661
  --account_col1Distance: 0;
581
662
 
663
+ --account_giftSizeIcon: calc(var(--sp2x) - var(--sp0-5x) / 2);
664
+ --account_giftIconDistanceIconPTB: calc(var(--sp0-5x) / 2);
665
+ --account_giftIconDistanceIconPLR: calc(var(--sp0-5x) / 2);
666
+ --account_giftWrapperBorder: var(--sp0-5x);
667
+ --account_giftButtonTB: var(--sp1x);
668
+ --account_giftButtonLR: var(--sp2x);
669
+
582
670
  .mobile-order-items-table-wrap {
583
- .mobile-order-item-wrap {
671
+ .mobile-order-item-wrap,
672
+ .mobile-order-item-gift-wrap {
584
673
  padding: var(--sp3x) 0;
585
674
 
586
675
  .out-of-stock-mt {
587
676
  margin-bottom: var(--sp3x);
588
677
  }
589
678
 
590
- .mobile-order-item-inner-wrap {
679
+ .mobile-order-item-inner-wrap,
680
+ .mobile-order-item-gift-inner-wrap {
591
681
  display: flex;
592
682
 
593
683
  .mobile-image-wrap {
684
+ position: relative;
594
685
  overflow: hidden;
595
686
  border-radius: var(--sp1x);
596
687
  isolation: isolate;
package/dist/modules/checkout/CheckoutProvider.js CHANGED
@@ -9,19 +9,22 @@ export const useCheckoutContext = () => {
9
9
  export const CheckoutProvider = ({ children }) => {
10
10
  const { selectedLang } = useTranslation();
11
11
  const { useCart, useUser } = useAccountContext();
12
- const { getCart, itemsCount } = useCart();
13
- const { user } = useUser();
12
+ const { getCart, setCart, itemsCount, mergeCart } = useCart();
13
+ const { user, isLoggedIn } = useUser();
14
14
  const form = useRef();
15
15
  const [checkoutData, setCheckoutData] = useState({
16
16
  addressId: null,
17
17
  useBalance: null,
18
18
  note: '',
19
- paymentType: user?.payment_method || null,
19
+ paymentType: user?.payment_method || 'cash_on_delivery',
20
20
  });
21
21
  const [idramForm, setIdramForm] = useState();
22
22
  const isCheckoutPage = useMemo(() => {
23
23
  return window.location.href.includes('checkout');
24
24
  }, [window.location.href]);
25
+ const isCartPage = useMemo(() => {
26
+ return window.location.href.includes('cart');
27
+ }, [window.location.href]);
25
28
  const checkoutBtnDisabled = useMemo(() => {
26
29
  let isDisabled = false;
27
30
  if (isCheckoutPage && isNumeric(checkoutData.paymentType)) {
@@ -76,6 +79,13 @@ export const CheckoutProvider = ({ children }) => {
76
79
  form.current.submit();
77
80
  }
78
81
  }, [idramForm, form]);
82
+ useEffect(() => {
83
+ setCart((prev) => ({ ...prev, loading: true }));
84
+ getCart(checkoutData);
85
+ if (isLoggedIn) {
86
+ mergeCart();
87
+ }
88
+ }, [isCartPage, isCheckoutPage, selectedLang, isLoggedIn]);
79
89
  return (React.createElement(CheckoutContext.Provider, { value: {
80
90
  checkoutData,
81
91
  setCheckoutData,
package/dist/modules/checkout/CheckoutTemplate/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useCallback, useEffect, useRef, useState } from 'react';
2
- import { Page, useEvent } from '@weareconceptstudio/core';
2
+ import { Page } from '@weareconceptstudio/core';
3
3
  import { Sequence, TotalCheckout } from '../../../components';
4
4
  import { useAddressContext } from '../../address';
5
5
  import { useAccountContext } from '../../../AccountProvider';
@@ -15,10 +15,11 @@ import SequenceSkeleton from '../../../components/Sequence/Skeleton';
15
15
  import SkeletonAddressSelect from '../../address/SelectAddress/Skeleton';
16
16
  const CheckoutTemplate = () => {
17
17
  const firstStepFormRef = useRef(null);
18
+ const { useCart, useUser } = useAccountContext();
18
19
  const { hasCheckoutAddress, addressLoading } = useAddressContext();
19
20
  const { handleCheckout } = useCheckoutContext();
20
- const { useCart } = useAccountContext();
21
21
  const { items, itemsCount, loading } = useCart();
22
+ const { user } = useUser();
22
23
  const checkStep = {
23
24
  isShipping: !hasCheckoutAddress,
24
25
  isReview: hasCheckoutAddress,
@@ -46,19 +47,18 @@ const CheckoutTemplate = () => {
46
47
  }
47
48
  }, [itemsCount, loading]);
48
49
  return (React.createElement(Page, { className: 'checkout use-account' },
49
- React.createElement(AccountContainer, { className: `second-version` },
50
- React.createElement(CheckoutTemplateStyle, null,
51
- React.createElement(TotalCheckout, { isShipping: checkStep.isShipping, buttonProps: {
52
- url: false,
53
- handleClick: handleCheckoutBtn,
54
- type: checkStep.isShipping ? 'submit' : 'button',
55
- text: checkStep.isShipping ? 'account.cart_checkout.proceedToCheckout' : 'account.cart_checkout.proceedToPayment',
56
- loadingButton: loadingProcessToPayment,
57
- } }, !addressLoading && itemsCount ? (React.createElement(React.Fragment, null,
58
- React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
59
- checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))) : (React.createElement(React.Fragment, null,
60
- React.createElement(SequenceSkeleton, { className: 'sequence-checkout-template' }),
61
- React.createElement(SkeletonAddressSelect, { className: 'address-checkout-template' }),
62
- React.createElement(SkeletonCartTemplate, null))))))));
50
+ React.createElement(AccountContainer, { className: `second-version` }, itemsCount && user ? (React.createElement(CheckoutTemplateStyle, null,
51
+ React.createElement(TotalCheckout, { isShipping: checkStep.isShipping, buttonProps: {
52
+ url: false,
53
+ handleClick: handleCheckoutBtn,
54
+ type: checkStep.isShipping ? 'submit' : 'button',
55
+ text: checkStep.isShipping ? 'account.cart_checkout.proceedToCheckout' : 'account.cart_checkout.proceedToPayment',
56
+ loadingButton: loadingProcessToPayment,
57
+ } }, !addressLoading && itemsCount ? (React.createElement(React.Fragment, null,
58
+ React.createElement(Sequence, { step: checkStep.isShipping ? 'shipping' : 'review' }),
59
+ checkStep.isShipping ? React.createElement(StepShipping, { firstStepFormRef: firstStepFormRef }) : React.createElement(StepReview, { items: items }))) : (React.createElement(React.Fragment, null,
60
+ React.createElement(SequenceSkeleton, { className: 'sequence-checkout-template' }),
61
+ React.createElement(SkeletonAddressSelect, { className: 'address-checkout-template' }),
62
+ React.createElement(SkeletonCartTemplate, null)))))) : null)));
63
63
  };
64
64
  export default CheckoutTemplate;
package/dist/styles/variables.js CHANGED
@@ -91,8 +91,8 @@ const AccountVariables = createGlobalStyle `${css `
91
91
  --account_h4: 56px;
92
92
  --account_h5: 48px;
93
93
  --account_h6: 40px;
94
- --account_p2: 24px;
95
94
  --account_p1: 32px;
95
+ --account_p2: 24px;
96
96
  --account_p3: 20px;
97
97
  --account_p4: 18px;
98
98
  --account_p5: 12px;
package/dist/translations/en.d.ts CHANGED
@@ -60,6 +60,7 @@ declare const _default: {
60
60
  phonePlaceholder: string;
61
61
  };
62
62
  cart_checkout: {
63
+ restore: string;
63
64
  editCart: string;
64
65
  cartEmpty: string;
65
66
  cartEmptyDesc: string;
package/dist/translations/en.js CHANGED
@@ -60,6 +60,7 @@ export default {
60
60
  phonePlaceholder: 'Phone',
61
61
  },
62
62
  cart_checkout: {
63
+ restore: 'restore',
63
64
  editCart: 'Edit cart',
64
65
  cartEmpty: 'Your cart is empty',
65
66
  cartEmptyDesc: 'Once you add something to your cart, it will appear here. Ready to get started?',
package/dist/translations/hy.d.ts CHANGED
@@ -60,6 +60,7 @@ declare const _default: {
60
60
  phonePlaceholder: string;
61
61
  };
62
62
  cart_checkout: {
63
+ restore: string;
63
64
  editCart: string;
64
65
  cartEmpty: string;
65
66
  cartEmptyDesc: string;
package/dist/translations/hy.js CHANGED
@@ -60,6 +60,7 @@ export default {
60
60
  phonePlaceholder: 'Հեռախոս',
61
61
  },
62
62
  cart_checkout: {
63
+ restore: 'Վերականգնել',
63
64
  editCart: 'Խմբագրել զամբյուղը',
64
65
  cartEmpty: 'Ձեր զամբյուղը դատարկ է',
65
66
  cartEmptyDesc: 'Երբ դուք ինչ-որ բան ավելացնեք ձեր զամբյուղին, այն կհայտնվի այստեղ։ Պատրա՞ստ եք սկսել։',
package/dist/translations/index.d.ts CHANGED
@@ -61,6 +61,7 @@ declare const _default: {
61
61
  phonePlaceholder: string;
62
62
  };
63
63
  cart_checkout: {
64
+ restore: string;
64
65
  editCart: string;
65
66
  cartEmpty: string;
66
67
  cartEmptyDesc: string;
@@ -300,6 +301,7 @@ declare const _default: {
300
301
  phonePlaceholder: string;
301
302
  };
302
303
  cart_checkout: {
304
+ restore: string;
303
305
  editCart: string;
304
306
  cartEmpty: string;
305
307
  cartEmptyDesc: string;
@@ -493,6 +495,7 @@ declare const _default: {
493
495
  continueWidth: string;
494
496
  };
495
497
  password_management: {
498
+ restore: string;
496
499
  password: string;
497
500
  passwordPlaceholder: string;
498
501
  resetPassword: string;
package/dist/translations/ru.d.ts CHANGED
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  continueWidth: string;
15
15
  };
16
16
  password_management: {
17
+ restore: string;
17
18
  password: string;
18
19
  passwordPlaceholder: string;
19
20
  resetPassword: string;
package/dist/translations/ru.js CHANGED
@@ -14,6 +14,7 @@ export default {
14
14
  continueWidth: 'или продолжить с',
15
15
  },
16
16
  password_management: {
17
+ restore: 'Восстановить',
17
18
  password: 'Пароль',
18
19
  passwordPlaceholder: 'Пароль',
19
20
  resetPassword: 'Сбросить пароль',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weareconceptstudio/account",
3
- "version": "0.4.9",
3
+ "version": "0.5.1",
4
4
  "description": "Concept Studio Account",
5
5
  "author": "Concept Studio",
6
6
  "license": "ISC",