@lancom/shared 0.0.270 → 0.0.272
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/assets/scss/variables/_theme.scss +3 -0
- package/components/common/client_settings/client-settings.scss +51 -13
- package/components/common/client_settings/client-settings.vue +35 -15
- package/components/order/order_refund_view/order-refund-view.vue +4 -3
- package/components/products/products_autocomplete/products-autocomplete.vue +10 -1
- package/package.json +1 -1
- package/pages/order/_token/refund/_refund.vue +1 -0
|
@@ -46,6 +46,7 @@ $purple: #7D6AEF;
|
|
|
46
46
|
$purple_lighter: rgba(127, 107, 239, 0.3);
|
|
47
47
|
$purple_darker: #6D57EB;
|
|
48
48
|
$dark_blue: #343750;
|
|
49
|
+
$brand_color_1: #7D6AEF;
|
|
49
50
|
|
|
50
51
|
// new color schema
|
|
51
52
|
$black: #343750 !default;
|
|
@@ -56,6 +57,8 @@ $grey_3: #EFF1F2;
|
|
|
56
57
|
$grey_4: #F9F9FC;
|
|
57
58
|
$grey_5: #9898A5 !default;
|
|
58
59
|
|
|
60
|
+
$text_dark_1: #1C1C1E;
|
|
61
|
+
|
|
59
62
|
$white: #fff;
|
|
60
63
|
|
|
61
64
|
// Elevations
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
@import "@/assets/scss/variables";
|
|
2
|
+
|
|
2
3
|
.ClientSettings {
|
|
3
4
|
&__wrapper {
|
|
4
5
|
position: relative;
|
|
5
6
|
}
|
|
6
|
-
&__field {
|
|
7
|
-
padding: 6px !important;
|
|
8
|
-
height: 50px;
|
|
9
|
-
display: flex !important;
|
|
10
|
-
align-items: center;
|
|
11
|
-
cursor: pointer;
|
|
12
|
-
}
|
|
13
7
|
&__inner {
|
|
14
8
|
min-width: 72px;
|
|
15
9
|
width: 33%;
|
|
@@ -20,8 +14,29 @@
|
|
|
20
14
|
&__value {
|
|
21
15
|
color: $grey_1;
|
|
22
16
|
text-transform: uppercase;
|
|
23
|
-
margin-left: 20px;
|
|
24
17
|
flex-grow: 1;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
background-color: rgba(125, 106, 239, 0.07);
|
|
21
|
+
padding: 10px 10px 5px 10px;
|
|
22
|
+
border-radius: 20px;
|
|
23
|
+
&--divider {
|
|
24
|
+
display: block;
|
|
25
|
+
height: 16px;
|
|
26
|
+
width: 1px;
|
|
27
|
+
background-color: rgba(0, 0, 0, 0.14);
|
|
28
|
+
margin: 0 5px;
|
|
29
|
+
}
|
|
30
|
+
span i {
|
|
31
|
+
color: $brand_color_1;
|
|
32
|
+
font-size: 25px;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
&__divider {
|
|
36
|
+
margin-top: 10px;
|
|
37
|
+
margin-bottom: 5px;
|
|
38
|
+
border: 1px solid rgba(0, 0, 0, 0.14);
|
|
39
|
+
width: 100%;
|
|
25
40
|
}
|
|
26
41
|
&__caret {
|
|
27
42
|
color: $grey_5;
|
|
@@ -32,22 +47,45 @@
|
|
|
32
47
|
position: absolute;
|
|
33
48
|
z-index: 101;
|
|
34
49
|
top: 40px;
|
|
35
|
-
width:
|
|
50
|
+
width: 220px;
|
|
51
|
+
margin-top: 20px;
|
|
52
|
+
margin-left: 10px;
|
|
36
53
|
// transform: translateY(-50%);
|
|
37
|
-
padding:
|
|
38
|
-
box-shadow:
|
|
54
|
+
padding: 15px;
|
|
55
|
+
box-shadow: 0px 4px 121px 0px rgba(145, 136, 188, 0.34);
|
|
39
56
|
background-color: white;
|
|
57
|
+
border-radius: 12px;
|
|
40
58
|
}
|
|
41
59
|
&__field {
|
|
42
|
-
|
|
60
|
+
font-size: 18px;
|
|
61
|
+
font-weight: 600;
|
|
62
|
+
line-height: 26px;
|
|
63
|
+
letter-spacing: -0.025em;
|
|
43
64
|
display: flex;
|
|
44
65
|
justify-content: space-between;
|
|
45
66
|
cursor: pointer;
|
|
67
|
+
padding: 6px;
|
|
68
|
+
align-items: center;
|
|
69
|
+
> i {
|
|
70
|
+
color: $purple;
|
|
71
|
+
}
|
|
46
72
|
&-item {
|
|
47
73
|
padding: 7px 10px;
|
|
48
74
|
cursor: pointer;
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
font-size: 16px;
|
|
78
|
+
|
|
79
|
+
&-checked {
|
|
80
|
+
margin-right: 10px;
|
|
81
|
+
margin-top: 2px;
|
|
82
|
+
}
|
|
83
|
+
&-icon {
|
|
84
|
+
margin-right: 10px;
|
|
85
|
+
margin-top: 3px;
|
|
86
|
+
}
|
|
49
87
|
&:hover {
|
|
50
|
-
|
|
88
|
+
color: $purple;
|
|
51
89
|
}
|
|
52
90
|
}
|
|
53
91
|
}
|
|
@@ -4,16 +4,15 @@
|
|
|
4
4
|
class="ClientSettings__field"
|
|
5
5
|
@click="isOpen = !isOpen">
|
|
6
6
|
<div class="lc_regular16 ClientSettings__value">
|
|
7
|
-
<
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
<span v-if="country">
|
|
8
|
+
<i class="icon-globe"></i>
|
|
9
|
+
</span>
|
|
10
|
+
<!-- <span class="ClientSettings__value--divider"></span> -->
|
|
11
|
+
<!-- <span v-if="currency">
|
|
12
|
+
<i class="icon-message"></i>
|
|
13
|
+
</span> -->
|
|
14
|
+
<i class="icon-angle-down ClientSettings__caret"></i>
|
|
15
15
|
</div>
|
|
16
|
-
<i class="icon-angle-down ClientSettings__caret"></i>
|
|
17
16
|
</div>
|
|
18
17
|
<div
|
|
19
18
|
v-if="isOpen"
|
|
@@ -23,7 +22,7 @@
|
|
|
23
22
|
<div
|
|
24
23
|
class="ClientSettings__field"
|
|
25
24
|
@click="toggleVisibleCountries()">
|
|
26
|
-
<span>
|
|
25
|
+
<span>Country</span>
|
|
27
26
|
<i class="icon-angle-down"></i>
|
|
28
27
|
</div>
|
|
29
28
|
<div v-if="visibleCountries">
|
|
@@ -32,15 +31,26 @@
|
|
|
32
31
|
:key="item._id"
|
|
33
32
|
class="ClientSettings__field-item"
|
|
34
33
|
@click="selectCountry(item)">
|
|
35
|
-
|
|
34
|
+
<div class="ClientSettings__field-item-checked">
|
|
35
|
+
<checked-icon :checked="country && country._id === item._id" />
|
|
36
|
+
</div>
|
|
37
|
+
<div
|
|
38
|
+
v-if="item.icon"
|
|
39
|
+
class="ClientSettings__field-item-icon">
|
|
40
|
+
<img :src="item.icon" />
|
|
41
|
+
</div>
|
|
42
|
+
<div>
|
|
43
|
+
{{ item.name }}
|
|
44
|
+
</div>
|
|
36
45
|
</div>
|
|
37
46
|
</div>
|
|
38
47
|
</div>
|
|
48
|
+
<div class="ClientSettings__divider"></div>
|
|
39
49
|
<div>
|
|
40
50
|
<div
|
|
41
51
|
class="ClientSettings__field"
|
|
42
52
|
@click="toggleVisibleCurrencies()">
|
|
43
|
-
<span>
|
|
53
|
+
<span>Currency</span>
|
|
44
54
|
<i class="icon-angle-down"></i>
|
|
45
55
|
</div>
|
|
46
56
|
<div v-if="visibleCurrencies">
|
|
@@ -49,7 +59,12 @@
|
|
|
49
59
|
:key="item._id"
|
|
50
60
|
class="ClientSettings__field-item"
|
|
51
61
|
@click="selectCurrency(item)">
|
|
52
|
-
|
|
62
|
+
<div class="ClientSettings__field-item-checked">
|
|
63
|
+
<checked-icon :checked="currency && currency._id === item._id" />
|
|
64
|
+
</div>
|
|
65
|
+
<div>
|
|
66
|
+
{{ item.name }}
|
|
67
|
+
</div>
|
|
53
68
|
</div>
|
|
54
69
|
</div>
|
|
55
70
|
</div>
|
|
@@ -59,15 +74,20 @@
|
|
|
59
74
|
|
|
60
75
|
<script>
|
|
61
76
|
import { mapGetters } from 'vuex';
|
|
77
|
+
import CheckedIcon from '@lancom/shared/components/common/checked-icon';
|
|
78
|
+
|
|
62
79
|
const Cookie = process.client ? require('js-cookie') : undefined;
|
|
63
80
|
|
|
64
81
|
export default {
|
|
65
82
|
name: 'ClientSettings',
|
|
83
|
+
components: {
|
|
84
|
+
CheckedIcon
|
|
85
|
+
},
|
|
66
86
|
data() {
|
|
67
87
|
return {
|
|
68
88
|
isOpen: false,
|
|
69
|
-
visibleCountries:
|
|
70
|
-
visibleCurrencies:
|
|
89
|
+
visibleCountries: true,
|
|
90
|
+
visibleCurrencies: true
|
|
71
91
|
};
|
|
72
92
|
},
|
|
73
93
|
computed: {
|
|
@@ -79,6 +79,7 @@
|
|
|
79
79
|
v-for="product of products"
|
|
80
80
|
:key="product._id"
|
|
81
81
|
:product="product"
|
|
82
|
+
:order="order"
|
|
82
83
|
:responsive="responsive"
|
|
83
84
|
class="OrderRefundView__product" />
|
|
84
85
|
</div>
|
|
@@ -88,13 +89,13 @@
|
|
|
88
89
|
'OrderRefundView__totals--paid': isPaid
|
|
89
90
|
}">
|
|
90
91
|
<div class="lc_regular16">
|
|
91
|
-
Total ex {{ taxName }}: <b>{{ refund.total | price(currency) }}</b>
|
|
92
|
+
Total ex {{ taxName }}: <b>{{ refund.total | price(order.currency) }}</b>
|
|
92
93
|
</div>
|
|
93
94
|
<div class="lc_regular16">
|
|
94
|
-
{{ taxName }}: <b>{{ refund.totalGST - refund.total | price(currency) }}</b>
|
|
95
|
+
{{ taxName }}: <b>{{ refund.totalGST - refund.total | price(order.currency) }}</b>
|
|
95
96
|
</div>
|
|
96
97
|
<div class="lc_regular16">
|
|
97
|
-
Total inc {{ taxName }}: <b>{{ refund.totalGST | price(currency) }}</b>
|
|
98
|
+
Total inc {{ taxName }}: <b>{{ refund.totalGST | price(order.currency) }}</b>
|
|
98
99
|
</div>
|
|
99
100
|
</div>
|
|
100
101
|
</div>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
v-model="text"
|
|
6
6
|
:autofocus="autofocus"
|
|
7
7
|
name="search"
|
|
8
|
-
placeholder="
|
|
8
|
+
:placeholder="placeholder"
|
|
9
9
|
type="text"
|
|
10
10
|
class="form-field no-label tiny-placeholder labelless"
|
|
11
11
|
autocomplete="off"
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
@blur="hideResults"
|
|
18
18
|
@keydown.enter="goToSearch" />
|
|
19
19
|
<i
|
|
20
|
+
v-if="hasSearchIcon"
|
|
20
21
|
class="icon-search"
|
|
21
22
|
@click="goToSearch"></i>
|
|
22
23
|
</div>
|
|
@@ -62,6 +63,14 @@ export default {
|
|
|
62
63
|
autofocus: {
|
|
63
64
|
type: Boolean,
|
|
64
65
|
default: false
|
|
66
|
+
},
|
|
67
|
+
hasSearchIcon: {
|
|
68
|
+
type: Boolean,
|
|
69
|
+
default: true
|
|
70
|
+
},
|
|
71
|
+
placeholder: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: 'Search products'
|
|
65
74
|
}
|
|
66
75
|
},
|
|
67
76
|
data() {
|
package/package.json
CHANGED