@weareconceptstudio/account 0.4.2 → 0.4.3

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 (28) hide show
  1. package/dist/components/AccountCounter/index.d.ts +6 -0
  2. package/dist/components/AccountCounter/index.js +38 -0
  3. package/dist/components/AccountCounter/style.d.ts +2 -0
  4. package/dist/components/AccountCounter/style.js +79 -0
  5. package/dist/components/index.d.ts +5 -4
  6. package/dist/components/index.js +5 -4
  7. package/dist/modules/address/AddressItem/index.d.ts +2 -1
  8. package/dist/modules/address/AddressItem/index.js +18 -8
  9. package/dist/modules/address/AddressItem/style.js +33 -6
  10. package/dist/modules/address/SelectAddress/index.js +1 -1
  11. package/dist/modules/address/SelectAddressPopup/index.js +3 -3
  12. package/dist/modules/address/ShippingBillingInfo/index.js +3 -3
  13. package/dist/modules/address/ShippingBillingInfo/style.js +24 -24
  14. package/dist/modules/cart/SimpleItems/ItemMobile/index.js +21 -35
  15. package/dist/modules/cart/SimpleItems/style.js +23 -2
  16. package/dist/modules/order/OrderedItems/style.js +2 -1
  17. package/dist/modules/payment/PaymentMethodItem/index.js +1 -1
  18. package/dist/modules/payment/PaymentMethodItem/style.js +1 -0
  19. package/dist/modules/payment/SelectedPayment/index.js +1 -1
  20. package/dist/styles/variables.js +1 -1
  21. package/dist/translations/en.d.ts +236 -213
  22. package/dist/translations/en.js +245 -230
  23. package/dist/translations/hy.d.ts +1 -0
  24. package/dist/translations/hy.js +1 -0
  25. package/dist/translations/index.d.ts +238 -213
  26. package/dist/translations/ru.d.ts +1 -0
  27. package/dist/translations/ru.js +1 -0
  28. package/package.json +1 -1
package/dist/components/AccountCounter/index.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export default AccountCounter;
2
+ declare function AccountCounter({ productId, qty }: {
3
+ productId: any;
4
+ qty?: number;
5
+ }): React.JSX.Element;
6
+ import React from 'react';
package/dist/components/AccountCounter/index.js ADDED
@@ -0,0 +1,38 @@
1
+ import React, { useState, useCallback, useEffect } from 'react';
2
+ import { Text, debounce } from '@weareconceptstudio/core';
3
+ import { useAccountContext } from '../../AccountProvider';
4
+ //* Style
5
+ import AccountCounterStyle from './style';
6
+ const AccountCounter = ({ productId, qty = 1 }) => {
7
+ const { useCart } = useAccountContext();
8
+ const { toggleCartItem, items } = useCart();
9
+ //! State
10
+ const [count, setCount] = useState(qty);
11
+ useEffect(() => {
12
+ setCount(items.find((item) => item.product.id == productId)?.qty || qty);
13
+ }, [items]);
14
+ const updateCartServer = useCallback((quantity) => {
15
+ toggleCartItem({
16
+ productId,
17
+ qty: quantity,
18
+ });
19
+ }, [productId]);
20
+ const debouncedUpdateCartServer = useCallback(debounce((quantity) => updateCartServer(quantity), 300), [updateCartServer]);
21
+ const handleAddToCart = (e, type = 'inc') => {
22
+ e.stopPropagation();
23
+ const newCount = type == 'inc' ? count + 1 : count - 1;
24
+ setCount(newCount);
25
+ debouncedUpdateCartServer(newCount);
26
+ };
27
+ return (React.createElement(AccountCounterStyle, { onClick: (e) => e.stopPropagation(), className: `counter-block ${count == 0 ? 'opacity-zero pointer-none' : ''}` },
28
+ React.createElement("div", { className: 'counter' },
29
+ React.createElement("div", { onClick: (e) => handleAddToCart(e, 'dec'), className: `c-icon-block ${count == 0 ? 'disable' : ''}` },
30
+ React.createElement("svg", { fill: 'none', viewBox: '0 0 13 3', className: `minus`, xmlns: 'http://www.w3.org/2000/svg' },
31
+ React.createElement("path", { d: 'M0 1.5H12', strokeWidth: '2' }))),
32
+ React.createElement(Text, { className: `p p5 font-montserrat-arm-medium count` }, `${count}`),
33
+ React.createElement("div", { onClick: (e) => handleAddToCart(e, 'inc'), className: `c-icon-block ${count == 99 ? 'disable' : ''}` },
34
+ React.createElement("svg", { fill: 'none', className: `plus`, viewBox: '0 0 12 12', xmlns: 'http://www.w3.org/2000/svg' },
35
+ React.createElement("path", { d: 'M0 6H12', strokeWidth: '2' }),
36
+ React.createElement("path", { d: 'M6 12L6 0', strokeWidth: '2' }))))));
37
+ };
38
+ export default AccountCounter;
package/dist/components/AccountCounter/style.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export default AccountCounterStyle;
2
+ declare const AccountCounterStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
package/dist/components/AccountCounter/style.js ADDED
@@ -0,0 +1,79 @@
1
+ import styled from 'styled-components';
2
+ const AccountCounterStyle = styled.div `
3
+ --account_counterWidth: var(--sp10x);
4
+
5
+ --account_counterHeight: var(--sp3x);
6
+ --account_counterIconSize: var(--sp1-5x);
7
+
8
+ width: var(--account_counterWidth);
9
+ height: var(--account_counterHeight);
10
+ display: flex;
11
+ transition: opacity var(--account_trTime) ease-out;
12
+
13
+ .counter {
14
+ width: 100%;
15
+ display: flex;
16
+ align-items: center;
17
+ justify-content: space-between;
18
+
19
+ .count {
20
+ color: var(--backgroundColor);
21
+ }
22
+
23
+ svg {
24
+ width: var(--account_counterIconSize);
25
+ height: var(--account_counterIconSize);
26
+
27
+ stroke: var(--backgroundColor);
28
+ fill: var(--backgroundColor);
29
+ }
30
+ }
31
+
32
+ .c-icon-block {
33
+ cursor: pointer;
34
+
35
+ display: flex;
36
+ align-items: center;
37
+ justify-content: center;
38
+
39
+ width: var(--sp3x);
40
+ height: var(--sp3x);
41
+ background-color: #f7f8f9;
42
+ border-radius: 50%;
43
+
44
+ &.disable {
45
+ pointer-events: none;
46
+ opacity: 0.5;
47
+ cursor: default !important;
48
+ }
49
+ }
50
+
51
+ /* //! 1920 */
52
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
53
+ }
54
+
55
+ /* //! 1510 */
56
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
57
+ }
58
+
59
+ /* //! 1440 */
60
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
61
+ }
62
+
63
+ /* //! 1280 */
64
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
65
+ }
66
+
67
+ /* //! 1024 */
68
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
69
+ }
70
+
71
+ /* //! 768 */
72
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
73
+ }
74
+
75
+ /* //! Mobile */
76
+ @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
77
+ }
78
+ `;
79
+ export default AccountCounterStyle;
package/dist/components/index.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- export { default as AccountButton } from './AccountButton';
2
- export { default as CustomCheckbox } from './CustomCheckbox';
3
- export { default as FormInputCode } from './FormInputCode';
4
- export { default as Pagination } from './Pagination';
5
1
  export { default as Sequence } from './Sequence';
2
+ export { default as Pagination } from './Pagination';
6
3
  export { default as TotalCheckout } from './TotalCheckout';
4
+ export { default as FormInputCode } from './FormInputCode';
5
+ export { default as AccountButton } from './AccountButton';
6
+ export { default as AccountCounter } from './AccountCounter';
7
7
  export { default as WarningMessage } from './WarningMessage';
8
+ export { default as CustomCheckbox } from './CustomCheckbox';
8
9
  export { default as WarningMessageForPopup } from './WarningMessageForPopup';
package/dist/components/index.js CHANGED
@@ -1,8 +1,9 @@
1
- export { default as AccountButton } from './AccountButton';
2
- export { default as CustomCheckbox } from './CustomCheckbox';
3
- export { default as FormInputCode } from './FormInputCode';
4
- export { default as Pagination } from './Pagination';
5
1
  export { default as Sequence } from './Sequence';
2
+ export { default as Pagination } from './Pagination';
6
3
  export { default as TotalCheckout } from './TotalCheckout';
4
+ export { default as FormInputCode } from './FormInputCode';
5
+ export { default as AccountButton } from './AccountButton';
6
+ export { default as AccountCounter } from './AccountCounter';
7
7
  export { default as WarningMessage } from './WarningMessage';
8
+ export { default as CustomCheckbox } from './CustomCheckbox';
8
9
  export { default as WarningMessageForPopup } from './WarningMessageForPopup';
package/dist/modules/address/AddressItem/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export default AddressItem;
2
- declare function AddressItem({ type, title, data, checkout_review, select_address, onClick, checkedId, setCheckedId, className }: {
2
+ declare function AddressItem({ type, title, data, checkout_review, select_address, onClick, checkedId, setCheckedId, className, isNote }: {
3
3
  type: any;
4
4
  title: any;
5
5
  data: any;
@@ -9,5 +9,6 @@ declare function AddressItem({ type, title, data, checkout_review, select_addres
9
9
  checkedId: any;
10
10
  setCheckedId: any;
11
11
  className: any;
12
+ isNote?: boolean;
12
13
  }): React.JSX.Element;
13
14
  import React from 'react';
package/dist/modules/address/AddressItem/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useCallback } from 'react';
2
- import { Text, useUi } from '@weareconceptstudio/core';
2
+ import { Text, useTranslation, useUi } from '@weareconceptstudio/core';
3
3
  import { useAddressContext } from '../AddressProvider';
4
4
  //* Components
5
5
  import AddressForm from '../AddressForm';
@@ -7,9 +7,10 @@ import AccountButton from '../../../components/AccountButton';
7
7
  import WarningMessageForPopup from '../../../components/WarningMessageForPopup';
8
8
  //* Style
9
9
  import AddressItemStyle from './style';
10
- const AddressItem = ({ type, title, data, checkout_review, select_address, onClick, checkedId, setCheckedId, className }) => {
10
+ const AddressItem = ({ type, title, data, checkout_review, select_address, onClick, checkedId, setCheckedId, className, isNote = false }) => {
11
11
  const { openPopup } = useUi();
12
12
  const { deleteAddress, selectedAddresses } = useAddressContext();
13
+ const { translate } = useTranslation();
13
14
  //! Handle Popups
14
15
  const handleDeletePopup = useCallback(() => {
15
16
  openPopup(React.createElement(WarningMessageForPopup, { isDelete: true, title: 'deleteAddressMessage', description: 'confirmDeleteAddress', onRemove: () => deleteAddress({ addressId: data.id, type: data.type }) }), {
@@ -24,19 +25,28 @@ const AddressItem = ({ type, title, data, checkout_review, select_address, onCli
24
25
  }, [data]);
25
26
  return data ? (React.createElement(AddressItemStyle, { className: `item-container ${className || ''}` },
26
27
  checkout_review && (React.createElement("div", { className: `change-address-wrap` },
27
- React.createElement(Text, { className: `account-p account-p2 account-font-bold account-primary-color1`, text: title }),
28
- React.createElement(AccountButton, { text: `change`, btnType: `green-small-text`, onClick: onClick }))),
29
- React.createElement("div", { className: `item-internal-wrap` },
28
+ React.createElement(Text, { text: title, className: `account-p account-p2 account-font-bold account-primary-color1` }),
29
+ React.createElement(AccountButton, { text: `change`, onClick: onClick, btnType: `green-small-text` }))),
30
+ React.createElement("div", { className: `item-internal-wrap user-select-none` }, isNote && data.note_for_courier ? (React.createElement("div", { className: 'flex-box-block' },
31
+ React.createElement("div", { className: `relative-wrapper box-block` },
32
+ React.createElement("div", { className: `personal-data-wrap` }, data.displayLines.map((line, index) => (React.createElement(Text, { key: index, text: line, className: `account-p account-p3 account-primary-color1 ${index == 0 ? 'account-font-bold' : 'account-font-regular'} ${index == 1 || index == data.displayLines.length - 1 ? 'line-distance' : ''}` })))),
33
+ data.is_default ? (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color3 margin-style is-default`, text: `${type === 'shipping' ? 'defaultShippingAddress' : type == 'billing' ? 'defaultBillingAddress' : 'defaultAddress'}` })) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 margin-style opacity-zero`, text: `empty` }))),
34
+ React.createElement(Text, { className: `account-p account-p3 account-primary-color1 box-block` },
35
+ React.createElement("span", { className: `account-font-bold` },
36
+ translate('note'),
37
+ ":"),
38
+ " ",
39
+ React.createElement("span", { className: `account-font-regular` }, data.note_for_courier)))) : (React.createElement(React.Fragment, null,
30
40
  React.createElement("div", { className: `relative-wrapper` },
31
- React.createElement("div", { className: `personal-data-wrap` }, data.displayLines.map((line, index) => (React.createElement(Text, { key: index, className: `account-p account-p3 ${index == 0 ? 'account-font-bold' : 'account-font-regular'} ${index % 2 != 0 ? 'col-wrap' : ''} account-primary-color1`, text: line })))),
41
+ React.createElement("div", { className: `personal-data-wrap` }, data.displayLines.map((line, index) => (React.createElement(Text, { key: index, className: `account-p account-p3 account-primary-color1 ${index == 0 ? 'account-font-bold' : 'account-font-regular'} ${index == 1 || index == data.displayLines.length - 1 ? 'line-distance' : ''}`, text: line })))),
32
42
  data.is_default ? (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color3 margin-style is-default`, text: `${type === 'shipping' ? 'defaultShippingAddress' : type == 'billing' ? 'defaultBillingAddress' : 'defaultAddress'}` })) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 margin-style opacity-zero`, text: `empty` })),
33
43
  select_address && (React.createElement("div", { className: `circle-selected-wrap cursor-pointer ${checkedId == data.id ? 'active' : ''}`, onClick: () => setCheckedId(data.id) },
34
44
  React.createElement("svg", { version: '1.1', viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg', className: `checkbox-icon ${selectedAddresses?.id === data.id ? 'selected' : 'note-selected'}` },
35
45
  React.createElement("path", { d: 'M13.345 30.462c-1.062 0-1.859-0.531-2.39-1.328l-9.56-16.996c-0.797-1.328-0.266-2.921 1.062-3.718 1.328-0.531 2.921 0 3.718 1.328l7.436 13.012 12.481-20.183c0.797-1.328 2.39-1.593 3.718-0.797s1.593 2.39 0.797 3.718l-14.871 23.635c-0.531 0.797-1.328 1.328-2.39 1.328z' }))))),
36
- !checkout_review && (React.createElement("div", { className: `edit-remove-wrapper` },
46
+ !checkout_review ? (React.createElement("div", { className: `edit-remove-wrapper` },
37
47
  React.createElement(AccountButton, { text: `edit`, btnType: `green-small-text`, onClick: handleEditAddressPopup, className: `btn-one-address-version ${!select_address || (select_address && checkedId == data.id) ? 'show' : ''}` }),
38
48
  !select_address && !data.is_default && (React.createElement(React.Fragment, null,
39
49
  React.createElement("div", { className: `vertical-line` }),
40
- React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: `btn-more-address-version` })))))))) : null;
50
+ React.createElement(AccountButton, { text: `remove`, onClick: handleDeletePopup, btnType: `green-small-text`, className: `btn-more-address-version` }))))) : null))))) : null;
41
51
  };
42
52
  export default AddressItem;
package/dist/modules/address/AddressItem/style.js CHANGED
@@ -11,6 +11,9 @@ const AddressItemStyle = styled.section `
11
11
  --account_circleSize: var(--sp4x);
12
12
  --account_checkSize: var(--sp2x);
13
13
 
14
+ --account_flexBoxBLockItemsGap: var(--sp4x);
15
+ --account_flexBoxBLockItemWidth: calc(50% - var(--account_flexBoxBLockItemsGap) / 2);
16
+
14
17
  width: var(--account_itemWidth);
15
18
  padding: 0 calc(var(--account_itemDistance) / 2);
16
19
 
@@ -32,7 +35,7 @@ const AddressItemStyle = styled.section `
32
35
  height: 100%;
33
36
 
34
37
  .personal-data-wrap {
35
- .col-wrap {
38
+ .line-distance {
36
39
  margin-top: var(--account_smallMarginDistance);
37
40
  }
38
41
  }
@@ -86,11 +89,6 @@ const AddressItemStyle = styled.section `
86
89
  color: var(--account_backgroundColor);
87
90
  }
88
91
 
89
- &.active {
90
- border: 2px solid var(--account_primaryColor1);
91
- background-color: var(--account_primaryColor1);
92
- }
93
-
94
92
  .checkbox-icon {
95
93
  display: flex;
96
94
  justify-content: center;
@@ -100,6 +98,12 @@ const AddressItemStyle = styled.section `
100
98
  height: var(--account_checkSize);
101
99
  fill: var(--account_backgroundColor);
102
100
  }
101
+
102
+ &.active {
103
+ border: 2px solid var(--account_primaryColor1);
104
+ background-color: var(--account_primaryColor1);
105
+ pointer-events: none;
106
+ }
103
107
  }
104
108
  }
105
109
  }
@@ -121,6 +125,16 @@ const AddressItemStyle = styled.section `
121
125
  }
122
126
  }
123
127
 
128
+ .flex-box-block {
129
+ display: flex;
130
+ flex-wrap: wrap;
131
+ gap: var(--account_flexBoxBLockItemsGap);
132
+
133
+ .box-block {
134
+ width: var(--account_flexBoxBLockItemWidth);
135
+ }
136
+ }
137
+
124
138
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
125
139
  --account_itemInternalWrapPad: var(--sp3x);
126
140
  --account_verticalLineHeight: var(--sp1-5x);
@@ -139,6 +153,8 @@ const AddressItemStyle = styled.section `
139
153
  --account_changeAddressWrapMBot: var(--sp4x);
140
154
  --account_circleSize: var(--sp3x);
141
155
  --account_checkSize: var(--sp1-5x);
156
+
157
+ --account_flexBoxBLockItemsGap: var(--sp3x);
142
158
  }
143
159
 
144
160
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
@@ -150,6 +166,8 @@ const AddressItemStyle = styled.section `
150
166
  --account_changeAddressWrapMBot: var(--sp3x);
151
167
  --account_circleSize: var(--sp3x);
152
168
  --account_checkSize: var(--sp1-5x);
169
+
170
+ --account_flexBoxBLockItemsGap: var(--sp3x);
153
171
  }
154
172
 
155
173
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
@@ -161,6 +179,8 @@ const AddressItemStyle = styled.section `
161
179
  --account_changeAddressWrapMBot: var(--sp3x);
162
180
  --account_circleSize: var(--sp2-5x);
163
181
  --account_checkSize: var(--sp1x);
182
+
183
+ --account_flexBoxBLockItemsGap: var(--sp3x);
164
184
  }
165
185
 
166
186
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
@@ -172,6 +192,8 @@ const AddressItemStyle = styled.section `
172
192
  --account_changeAddressWrapMBot: var(--sp3x);
173
193
  --account_circleSize: var(--sp2-5x);
174
194
  --account_checkSize: var(--sp1x);
195
+
196
+ --account_flexBoxBLockItemsGap: var(--sp3x);
175
197
  }
176
198
 
177
199
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
@@ -184,6 +206,8 @@ const AddressItemStyle = styled.section `
184
206
  --account_changeAddressWrapMBot: var(--sp3x);
185
207
  --account_circleSize: var(--sp2-5x);
186
208
  --account_checkSize: var(--sp1x);
209
+
210
+ --account_flexBoxBLockItemsGap: var(--sp3x);
187
211
  }
188
212
 
189
213
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
@@ -197,6 +221,9 @@ const AddressItemStyle = styled.section `
197
221
  --account_circleSize: var(--sp2-5x);
198
222
  --account_checkSize: var(--sp1x);
199
223
 
224
+ --account_flexBoxBLockItemsGap: var(--sp3x);
225
+ --account_flexBoxBLockItemWidth: 100%;
226
+
200
227
  &:nth-child(2) {
201
228
  margin-top: var(--account_itemDistance);
202
229
  }
package/dist/modules/address/SelectAddress/index.js CHANGED
@@ -17,7 +17,7 @@ const SelectAddress = () => {
17
17
  React.createElement(AddressItem, { checkout_review: true, type: 'billing', select_address: false, title: 'billingAddress', data: selectedAddresses.billing, onClick: () => handleSelectPopup({
18
18
  title: 'selectBillingAddress',
19
19
  type: 'billing',
20
- }) }))) : (React.createElement(AddressItem, { checkout_review: true, type: 'shipping', title: 'address', className: 'full', select_address: false, data: selectedAddresses, onClick: () => handleSelectPopup({
20
+ }) }))) : (React.createElement(AddressItem, { isNote: true, checkout_review: true, type: 'shipping', title: 'address', className: 'full', select_address: false, data: selectedAddresses, onClick: () => handleSelectPopup({
21
21
  title: 'address',
22
22
  type: null,
23
23
  }) }))));
package/dist/modules/address/SelectAddressPopup/index.js CHANGED
@@ -42,10 +42,10 @@ const SelectAddressPopup = Memo(({ title, type }) => {
42
42
  React.createElement(Text, { tag: `h6`, className: hasAddressType ? `account-h6 account-font-bold account-primary-color1` : 'account-p account-p2 account-font-bold account-primary-color1', text: title }),
43
43
  React.createElement(AccountButton, { onClick: handleNewAddressPopup, text: `addNewAdd`, btnType: hasAddressType ? `purple-text` : 'green-small-text' })),
44
44
  addresses?.length > 0 ? (React.createElement("div", { ref: flexWrapperRef, className: `flex-wrapper` }, addresses.map((item, index) => {
45
- return (React.createElement(AddressItem, { id: item.id, type: type, data: item, key: index, select_address: true, checkout_review: false, checkedId: checkedId, setCheckedId: setCheckedId }));
45
+ return (React.createElement(AddressItem, { type: type, data: item, key: index, id: item.id, select_address: true, checkedId: checkedId, checkout_review: false, setCheckedId: setCheckedId }));
46
46
  }))) : null,
47
47
  React.createElement("div", { className: `cancel-and-save-wrap` },
48
- React.createElement(AccountButton, { btnType: `green-large-text`, text: `cancel`, onClick: closePopup }),
49
- React.createElement(AccountButton, { btnType: `full-width`, text: `saveAndApply`, onClick: handleAddressChangeSubmit }))));
48
+ React.createElement(AccountButton, { text: `cancel`, onClick: closePopup, btnType: `green-large-text` }),
49
+ React.createElement(AccountButton, { text: `saveAndApply`, btnType: `full-width`, onClick: handleAddressChangeSubmit }))));
50
50
  });
51
51
  export default SelectAddressPopup;
package/dist/modules/address/ShippingBillingInfo/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React, { memo } from 'react';
2
2
  import { Text } from '@weareconceptstudio/core';
3
+ import { useAddressContext } from '../AddressProvider';
3
4
  //* Style
4
5
  import ShippingBillingInfoStyle from './style';
5
- import { useAddressContext } from '../AddressProvider';
6
6
  // TODO: Address info to component
7
7
  const ShippingBillingInfo = memo(({ className, shipping_address, billing_address }) => {
8
8
  const { addressType } = useAddressContext();
@@ -10,7 +10,7 @@ const ShippingBillingInfo = memo(({ className, shipping_address, billing_address
10
10
  React.createElement(Text, { className: `account-p account-p1 account-font-bold account-primary-color1`, text: addressType ? 'shippingAndBillingInfo' : 'shippingInfo' }),
11
11
  React.createElement("div", { className: `info-space-line` }),
12
12
  React.createElement("div", { className: `info-wrap shipped` },
13
- React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 value`, text: `shippedTo` }),
14
- shipping_address.map((item, index) => (React.createElement(Text, { key: index, className: `account-p account-p3 account-font-regular account-primary-color1 nowrap`, text: item }))))));
13
+ React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 m-bot`, text: `shippedTo` }),
14
+ shipping_address.map((item, index) => (React.createElement(Text, { key: index, className: `account-p account-p3 account-font-regular account-primary-color1 nowrap ${index == shipping_address.length - 1 ? 'm-top' : ''}`, text: item }))))));
15
15
  });
16
16
  export default ShippingBillingInfo;
package/dist/modules/address/ShippingBillingInfo/style.js CHANGED
@@ -2,9 +2,9 @@ import styled from 'styled-components';
2
2
  const ShippingBillingInfoStyle = styled.section `
3
3
  --account_spaceLineMTop: var(--sp3x);
4
4
  --account_spaceLineMBot: var(--sp5x);
5
- --account_valueMBot: var(--sp2x);
5
+ --account_mBot: var(--sp2x);
6
6
  --account_billedMTop: var(--sp5x);
7
- --account_phoneMTop: var(--sp1x);
7
+ --account_mTop: var(--sp1x);
8
8
  --account_infoWrapWidth: 57%;
9
9
 
10
10
  .info-space-line {
@@ -16,80 +16,80 @@ const ShippingBillingInfoStyle = styled.section `
16
16
 
17
17
  .info-wrap {
18
18
  width: var(--account_infoWrapWidth);
19
-
20
- .value {
21
- margin-bottom: var(--account_valueMBot);
22
- }
23
-
24
- .phone {
25
- margin-top: var(--account_phoneMTop);
26
- }
27
19
  }
28
20
 
29
21
  .billed {
30
22
  margin-top: var(--account_billedMTop);
31
23
  }
32
24
 
25
+ .m-bot {
26
+ margin-bottom: var(--account_mBot);
27
+ }
28
+
29
+ .m-top {
30
+ margin-top: var(--account_mTop);
31
+ }
32
+
33
33
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeL}) {
34
34
  --account_spaceLineMTop: var(--sp2x);
35
35
  --account_spaceLineMBot: var(--sp4x);
36
- --account_valueMBot: var(--sp1x);
36
+ --account_mBot: var(--sp1x);
37
37
  --account_billedMTop: var(--sp4x);
38
- --account_phoneMTop: var(--sp1x);
38
+ --account_mTop: var(--sp1x);
39
39
  --account_infoWrapWidth: 46.3%;
40
40
  }
41
41
 
42
42
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeLMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeM}) {
43
43
  --account_spaceLineMTop: var(--sp2x);
44
44
  --account_spaceLineMBot: var(--sp4x);
45
- --account_valueMBot: var(--sp1x);
45
+ --account_mBot: var(--sp1x);
46
46
  --account_billedMTop: var(--sp4x);
47
- --account_phoneMTop: var(--sp1x);
47
+ --account_mTop: var(--sp1x);
48
48
  --account_infoWrapWidth: 58.3%;
49
49
  }
50
50
 
51
51
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeMMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeS}) {
52
52
  --account_spaceLineMTop: var(--sp2x);
53
53
  --account_spaceLineMBot: var(--sp3x);
54
- --account_valueMBot: var(--sp1x);
54
+ --account_mBot: var(--sp1x);
55
55
  --account_billedMTop: var(--sp3x);
56
- --account_phoneMTop: var(--sp1x);
56
+ --account_mTop: var(--sp1x);
57
57
  --account_infoWrapWidth: 61.3%;
58
58
  }
59
59
 
60
60
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXS}) {
61
61
  --account_spaceLineMTop: var(--sp2x);
62
62
  --account_spaceLineMBot: var(--sp3x);
63
- --account_valueMBot: var(--sp1x);
63
+ --account_mBot: var(--sp1x);
64
64
  --account_billedMTop: var(--sp3x);
65
- --account_phoneMTop: var(--sp1x);
65
+ --account_mTop: var(--sp1x);
66
66
  --account_infoWrapWidth: 66.3%;
67
67
  }
68
68
 
69
69
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_DesktopSizeXSMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSize}) {
70
70
  --account_spaceLineMTop: var(--sp2x);
71
71
  --account_spaceLineMBot: var(--sp3x);
72
- --account_valueMBot: var(--sp1x);
72
+ --account_mBot: var(--sp1x);
73
73
  --account_billedMTop: var(--sp3x);
74
- --account_phoneMTop: var(--sp1x);
74
+ --account_mTop: var(--sp1x);
75
75
  --account_infoWrapWidth: 82.3%;
76
76
  }
77
77
 
78
78
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeMin}) and (min-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeS}) {
79
79
  --account_spaceLineMTop: var(--sp2x);
80
80
  --account_spaceLineMBot: var(--sp2x);
81
- --account_valueMBot: var(--sp1x);
81
+ --account_mBot: var(--sp1x);
82
82
  --account_billedMTop: var(--sp2x);
83
- --account_phoneMTop: var(--sp1x);
83
+ --account_mTop: var(--sp1x);
84
84
  --account_infoWrapWidth: 74.3%;
85
85
  }
86
86
 
87
87
  @media only screen and (max-width: ${(props) => props.theme.account.mediaQuery.account_TabletSizeSMin}) {
88
88
  --account_spaceLineMTop: var(--sp2x);
89
89
  --account_spaceLineMBot: var(--sp2x);
90
- --account_valueMBot: var(--sp1x);
90
+ --account_mBot: var(--sp1x);
91
91
  --account_billedMTop: var(--sp2x);
92
- --account_phoneMTop: var(--sp1x);
92
+ --account_mTop: var(--sp1x);
93
93
  --account_infoWrapWidth: 67.3%;
94
94
 
95
95
  margin-top: var(--sp5x);
package/dist/modules/cart/SimpleItems/ItemMobile/index.js CHANGED
@@ -1,21 +1,21 @@
1
1
  import React, { memo, useMemo } from 'react';
2
2
  import { handlePriceCheckFunc, Image, Text } from '@weareconceptstudio/core';
3
3
  import { Select } from '@weareconceptstudio/form';
4
- import { AccountButton } from '../../../../components';
4
+ import { AccountButton, AccountCounter } from '../../../../components';
5
5
  import { useAccountContext } from '../../../../AccountProvider';
6
6
  const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) => {
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]);
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
17
  return (React.createElement(React.Fragment, null,
18
- React.createElement("div", { className: `mobile-order-item-wrap` },
18
+ React.createElement("div", { className: `mobile-order-item-wrap user-select-none` },
19
19
  React.createElement("div", { className: `mobile-order-item-inner-wrap` },
20
20
  React.createElement("div", { className: `mobile-image-wrap` },
21
21
  React.createElement(Image, { src: data.product.image.src, alt: data.product.image.alt })),
@@ -23,31 +23,17 @@ const ItemMobile = memo(({ data, remove, select, actions, maxQty, currency }) =>
23
23
  React.createElement(AccountButton, { text: data.product.name, btnType: `green-large-text`, className: `capitalize mobile-info-wrap-title`, onClick: () => handleProductClick(data.product) }),
24
24
  React.createElement("div", { className: 'mobile-info-item' },
25
25
  React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color1 mobile-short-info1`, text: data.product.short_info_1 })),
26
- React.createElement("div", { className: 'mobile-info-item' },
27
- React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 mobile-short-info2`, text: data.product.short_info_2 })),
28
- select ? (React.createElement("div", { className: `select-and-out-of-stock-mobile-wrap` }, !data.product?.out_of_stock ? (React.createElement(Select, { value: data.qty, options: selectionList, onChange: (val) => actions.add({
29
- qty: val,
30
- productId: data.product.id,
31
- }) })) : (React.createElement("div", { className: `mobile-info-item` },
32
- React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity-with-symbol`, text: `quantityWithSymbol` }),
33
- "\u00A0",
34
- React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity`, text: data.qty }))))) : (React.createElement("div", { className: `mobile-info-item` },
35
- React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity-with-symbol2`, text: `quantityWithSymbol` }),
36
- "\u00A0",
37
- React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity2`, text: data.qty }))),
38
- React.createElement("div", { className: `mobile-price-wrap nowrap` },
39
- React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt mobile-price-title`, text: `price` }),
40
- data.product?.sale_price ? (React.createElement("div", null,
41
- React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 mobile-discounted-price`, text: handlePriceCheckFunc(data.product.sale_price, currency) }),
42
- React.createElement(Text, { className: `account-p account-p3 account-font-regular account-primary-color2 line-through value mobile-price`, text: handlePriceCheckFunc(data.product.price, currency) }))) : (React.createElement(Text, { className: `account-p account-p3 account-font-bold account-primary-color1 mobile-price2`, text: handlePriceCheckFunc(data.product.price, currency) }))),
43
- React.createElement("div", { className: `mobile-total-price-wrap nowrap` },
44
- React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mb-mt mobile-total`, text: `total` }),
45
- data.product?.sale_price ? (React.createElement("div", null,
26
+ React.createElement("div", { className: `mobile-total-price-wrap nowrap flex-box` },
27
+ data.product?.sale_price ? (React.createElement("div", { className: 'mobile-total-price-flex-block' },
46
28
  React.createElement(Text, { className: `account-p account-p3 account-font-bold account-secondary-color2 mobile-total-discounted-price`, text: `${data.sale_total} ${currency}` }),
47
- 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}` }))))),
48
- React.createElement("div", { className: `edit-remove-favorite-mobile-wrap` },
49
- React.createElement("div", { className: 'empty' }),
50
- React.createElement("div", { className: `favorite-remove-mobile-wrap` }, remove && (React.createElement(AccountButton, { text: 'remove', btnType: `green-small-text`, onClick: () => actions.delete({ productId: data.product.id }) }))))),
29
+ 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}` })),
30
+ 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-medium account-primary-color1 mobile-quantity-with-symbol`, text: `quantityWithSymbol` }),
32
+ "\u00A0",
33
+ React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity`, text: data.qty }))))) : (React.createElement("div", { className: `in-block` },
34
+ React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity-with-symbol2`, text: `quantityWithSymbol` }),
35
+ "\u00A0",
36
+ React.createElement(Text, { className: `account-p account-p3 account-font-medium account-primary-color1 mobile-quantity2`, text: data.qty }))))))),
51
37
  React.createElement("div", { className: 'line' })));
52
38
  });
53
39
  export default ItemMobile;
package/dist/modules/cart/SimpleItems/style.js CHANGED
@@ -268,6 +268,19 @@ const CartItemsStyle = styled.section `
268
268
  }
269
269
  }
270
270
 
271
+ .flex-box {
272
+ display: flex;
273
+ flex-wrap: wrap;
274
+ justify-content: space-between;
275
+ align-items: center;
276
+ gap: var(--sp0-5x);
277
+ }
278
+
279
+ .in-block {
280
+ display: flex;
281
+ align-items: center;
282
+ }
283
+
271
284
  &.order-individual-mt {
272
285
  margin-top: var(--account_orderItemsMarTop);
273
286
  }
@@ -586,7 +599,8 @@ const CartItemsStyle = styled.section `
586
599
  height: fit-content;
587
600
 
588
601
  .image-cont {
589
- padding-top: 125% !important;
602
+ /* padding-top: 125% !important; */
603
+ padding-top: 100% !important;
590
604
 
591
605
  img {
592
606
  object-fit: contain;
@@ -610,7 +624,14 @@ const CartItemsStyle = styled.section `
610
624
 
611
625
  .mobile-price-wrap,
612
626
  .mobile-total-price-wrap {
613
- margin-top: var(--sp3x);
627
+ /* margin-top: var(--sp3x); */
628
+ margin-top: var(--sp2x);
629
+ }
630
+
631
+ .mobile-total-price-flex-block {
632
+ display: flex;
633
+ align-items: center;
634
+ gap: var(--sp0-5x);
614
635
  }
615
636
 
616
637
  .select-and-out-of-stock-mobile-wrap {
package/dist/modules/order/OrderedItems/style.js CHANGED
@@ -628,7 +628,8 @@ const OrderedItemsStyle = styled.div `
628
628
  height: fit-content;
629
629
 
630
630
  .image-cont {
631
- padding-top: 125% !important;
631
+ /* padding-top: 125% !important; */
632
+ padding-top: 100% !important;
632
633
 
633
634
  img {
634
635
  object-fit: contain;