@lancom/shared 0.0.111 → 0.0.112
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.
|
@@ -12,8 +12,11 @@
|
|
|
12
12
|
:address="order.shippingAddress"
|
|
13
13
|
:without-additional-info="true" />
|
|
14
14
|
</div>
|
|
15
|
+
<div class="Cart__quantity-errors">
|
|
16
|
+
<cart-quantity-errors />
|
|
17
|
+
</div>
|
|
15
18
|
<progress-steps-controls
|
|
16
|
-
:disabled-next="isSubmit && invalid"
|
|
19
|
+
:disabled-next="(isSubmit && invalid) || isNotValidQuantity"
|
|
17
20
|
@prev="$emit('prev')"
|
|
18
21
|
@next="submit" />
|
|
19
22
|
</validation-observer>
|
|
@@ -22,12 +25,16 @@
|
|
|
22
25
|
</template>
|
|
23
26
|
|
|
24
27
|
<script>
|
|
28
|
+
import CartQuantityErrors from '@lancom/shared/components/checkout/cart/cart_quantity_errors/cart-quantity-errors';
|
|
29
|
+
import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
|
|
25
30
|
import AddressForm from '@lancom/shared/components/checkout/order/address-form/address-form';
|
|
26
31
|
import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
|
|
27
32
|
|
|
28
33
|
export default {
|
|
29
34
|
name: 'OrderBillingInformation',
|
|
35
|
+
mixins: [CartMixin],
|
|
30
36
|
components: {
|
|
37
|
+
CartQuantityErrors,
|
|
31
38
|
AddressForm,
|
|
32
39
|
ProgressStepsControls
|
|
33
40
|
},
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="FAQ__wrapper view-transition">
|
|
3
|
+
<slot name="header">
|
|
4
|
+
<div class="FAQ__header">
|
|
5
|
+
<h1 class="lc_h1--white">
|
|
6
|
+
Frequently asked questions
|
|
7
|
+
</h1>
|
|
8
|
+
<span class="lc_subtitle1--strong-white FAQ__subtitle">
|
|
9
|
+
Here you can find all the questions you need answered
|
|
10
|
+
</span>
|
|
11
|
+
</div>
|
|
12
|
+
</slot>
|
|
13
|
+
<div class="content-inner">
|
|
14
|
+
<div class="row FAQ__content-wrapper">
|
|
15
|
+
<div class="FAQ__content col-md-10 col-12 mr-auto ml-auto">
|
|
16
|
+
<div
|
|
17
|
+
v-for="group in groups"
|
|
18
|
+
:key="group.type"
|
|
19
|
+
class="FAQ__group">
|
|
20
|
+
<div
|
|
21
|
+
:ref="group.type"
|
|
22
|
+
class="FAQ__group-header"
|
|
23
|
+
@click="togable && toggleGroup(group)">
|
|
24
|
+
<div
|
|
25
|
+
class="FAQ__group-title"
|
|
26
|
+
:class="group.type">
|
|
27
|
+
{{ group.name }}
|
|
28
|
+
</div>
|
|
29
|
+
<i
|
|
30
|
+
v-if="togable"
|
|
31
|
+
class="icon-cancel FAQ__group-caret"
|
|
32
|
+
:class="{ active: openedGroup === group.type }"></i>
|
|
33
|
+
</div>
|
|
34
|
+
<transition
|
|
35
|
+
name="fade"
|
|
36
|
+
appear>
|
|
37
|
+
<div
|
|
38
|
+
v-if="openedGroup === group.type"
|
|
39
|
+
class="FAQ__group-content view-transition">
|
|
40
|
+
<div
|
|
41
|
+
v-for="entity in group.entities"
|
|
42
|
+
:key="entity._id"
|
|
43
|
+
:ref="entity._id"
|
|
44
|
+
class="FAQ__entity">
|
|
45
|
+
<div
|
|
46
|
+
class="FAQ__entity-header"
|
|
47
|
+
@click="toggleEntity(entity)">
|
|
48
|
+
<div class="FAQ__entity-title">
|
|
49
|
+
{{ entity.question }}
|
|
50
|
+
</div>
|
|
51
|
+
<i
|
|
52
|
+
class="icon-angle-down FAQ__entity-header-caret"
|
|
53
|
+
:class="{ active: openedEntities.includes(entity._id) }"></i>
|
|
54
|
+
</div>
|
|
55
|
+
<transition
|
|
56
|
+
name="fade"
|
|
57
|
+
appear>
|
|
58
|
+
<div
|
|
59
|
+
v-if="openedEntities.includes(entity._id)"
|
|
60
|
+
class="FAQ__entity-body view-transition"
|
|
61
|
+
v-html="entity.answer">
|
|
62
|
+
</div>
|
|
63
|
+
</transition>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</transition>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</template>
|
|
73
|
+
|
|
74
|
+
<script>
|
|
75
|
+
export default {
|
|
76
|
+
name: 'FAQ',
|
|
77
|
+
props: {
|
|
78
|
+
groups: {
|
|
79
|
+
type: Array,
|
|
80
|
+
required: true
|
|
81
|
+
},
|
|
82
|
+
togable: {
|
|
83
|
+
type: Boolean,
|
|
84
|
+
default: true
|
|
85
|
+
},
|
|
86
|
+
preopenedGroup: {
|
|
87
|
+
type: Object
|
|
88
|
+
},
|
|
89
|
+
preopenedEntity: {
|
|
90
|
+
type: String
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
data() {
|
|
94
|
+
return {
|
|
95
|
+
openedGroup: null,
|
|
96
|
+
openedEntities: []
|
|
97
|
+
};
|
|
98
|
+
},
|
|
99
|
+
mounted() {
|
|
100
|
+
if (this.preopenedGroup) {
|
|
101
|
+
this.toggleGroup({ type: this.preopenedGroup });
|
|
102
|
+
}
|
|
103
|
+
if (this.preopenedEntity) {
|
|
104
|
+
this.toggleEntity({ _id: this.preopenedEntity });
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
methods: {
|
|
108
|
+
toggleGroup({ type }) {
|
|
109
|
+
this.openedGroup = this.openedGroup === type ? null : type;
|
|
110
|
+
},
|
|
111
|
+
toggleEntity({ _id }) {
|
|
112
|
+
const index = this.openedEntities.indexOf(_id);
|
|
113
|
+
if (~index) {
|
|
114
|
+
this.$delete(this.openedEntities, index);
|
|
115
|
+
} else {
|
|
116
|
+
this.openedEntities.push(_id);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
</script>
|
|
122
|
+
|
|
123
|
+
<style lang="scss">
|
|
124
|
+
@import "@lancom/shared/assets/scss/variables";
|
|
125
|
+
$types: delivery, general, other, printing, garments;
|
|
126
|
+
.FAQ {
|
|
127
|
+
&__wrapper {
|
|
128
|
+
margin-top: 20px;
|
|
129
|
+
}
|
|
130
|
+
&__header {
|
|
131
|
+
text-align: center;
|
|
132
|
+
background-color: $dark_blue;
|
|
133
|
+
padding: 70px 0 86px 0;
|
|
134
|
+
}
|
|
135
|
+
&__subtitle {
|
|
136
|
+
font-size: 25px;
|
|
137
|
+
font-weight: normal;
|
|
138
|
+
line-height: 35px;
|
|
139
|
+
letter-spacing: 0.02em;
|
|
140
|
+
}
|
|
141
|
+
&__content {
|
|
142
|
+
padding: 100px 0 180px 0;
|
|
143
|
+
}
|
|
144
|
+
&__group {
|
|
145
|
+
background-color: $light_gray;
|
|
146
|
+
& + & {
|
|
147
|
+
margin-top: 16px;
|
|
148
|
+
}
|
|
149
|
+
&-header {
|
|
150
|
+
padding: 22px 45px;
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
justify-content: space-between;
|
|
154
|
+
cursor: pointer;
|
|
155
|
+
text-transform: uppercase;
|
|
156
|
+
}
|
|
157
|
+
&-title {
|
|
158
|
+
font-weight: 500;
|
|
159
|
+
font-size: 22px;
|
|
160
|
+
line-height: 29px;
|
|
161
|
+
letter-spacing: 0.02em;
|
|
162
|
+
color: $dark_blue;
|
|
163
|
+
line-height: 41px;
|
|
164
|
+
padding-left: 62px;
|
|
165
|
+
position: relative;
|
|
166
|
+
&:before {
|
|
167
|
+
content: '';
|
|
168
|
+
width: 40px;
|
|
169
|
+
height: 40px;
|
|
170
|
+
position: absolute;
|
|
171
|
+
left: 0;
|
|
172
|
+
top: 50%;
|
|
173
|
+
transform: translateY(-50%);
|
|
174
|
+
background-size: cover;
|
|
175
|
+
}
|
|
176
|
+
@each $type in $types {
|
|
177
|
+
&.#{$type}:before {
|
|
178
|
+
background-image: url(~static/icons/#{$type}.svg);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
&-caret {
|
|
183
|
+
font-size: 16px;
|
|
184
|
+
&:before {
|
|
185
|
+
transform: rotate(45deg);
|
|
186
|
+
transition: transform .22s ease-in-out;
|
|
187
|
+
}
|
|
188
|
+
&.active:before {
|
|
189
|
+
transform: rotate(0);
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
&-content {
|
|
193
|
+
padding: 22px 45px 60px 45px;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
&__entity {
|
|
197
|
+
background-color: #FFFFFF;
|
|
198
|
+
& + & {
|
|
199
|
+
margin-top: 10px;
|
|
200
|
+
}
|
|
201
|
+
&-header {
|
|
202
|
+
padding: 18px 30px;
|
|
203
|
+
position: relative;
|
|
204
|
+
cursor: pointer;
|
|
205
|
+
&-caret {
|
|
206
|
+
font-size: 28px;
|
|
207
|
+
position: absolute;
|
|
208
|
+
top: 50%;
|
|
209
|
+
right: 30px;
|
|
210
|
+
transform: translateY(-50%);
|
|
211
|
+
&:before {
|
|
212
|
+
transform: rotate(0);
|
|
213
|
+
transition: transform .22s ease-in-out;
|
|
214
|
+
}
|
|
215
|
+
&.active:before {
|
|
216
|
+
transform: rotate(180deg);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
&-title {
|
|
221
|
+
font-weight: 500;
|
|
222
|
+
font-size: 18px;
|
|
223
|
+
line-height: 25px;
|
|
224
|
+
letter-spacing: 0.02em;
|
|
225
|
+
color: $dark_blue;
|
|
226
|
+
}
|
|
227
|
+
&-body {
|
|
228
|
+
padding: 6px 30px 24px 30px;
|
|
229
|
+
line-height: 27px;
|
|
230
|
+
color: $gray;
|
|
231
|
+
overflow: hidden;
|
|
232
|
+
@import "@lancom/shared/assets/scss/normalize";
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
</style>
|