Skip to content

Commit 78cbbef

Browse files
dora-jurcevicdora-jurcevic
committed
ADD: cart note added to delivery step
1 parent e16decb commit 78cbbef

File tree

5 files changed

+228
-7
lines changed

5 files changed

+228
-7
lines changed

‎assets/css/main.scss

+21
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,25 @@
2121
.icon {
2222
font-size: 24px;
2323
}
24+
.modal-popup {
25+
.modal-box {
26+
.popup {
27+
&__content {
28+
@apply flex flex-col items-center;
29+
30+
textarea {
31+
@apply w-full;
32+
}
33+
.modal-btn {
34+
@apply px-2 btn btn-primary btn-sm mt-2 py-1;
35+
}
36+
37+
}
38+
}
39+
}
40+
41+
}
42+
2443
.form-control {
2544
.label,
2645
label {
@@ -34,4 +53,6 @@
3453
}
3554
}
3655
}
56+
57+
3758
}

‎components/cart/checkout/CheckoutDelivery.vue

+102-7
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,56 @@
9393
</cart-total>
9494
</slot>
9595
</div>
96+
<div class="checkout-delivery__message">
97+
<slot name="delivery-message" :opened="opened">
98+
<cart-checkout-delivery-message :opened="opened">
99+
<template #info-message> </template>
100+
<template #message-button>
101+
<div class="msg-btn-wrapper">
102+
<button
103+
type="button"
104+
class="msg-btn"
105+
@click="opened = !opened"
106+
>
107+
<span class="msg-btn__label"> {{ $t('cart.delivery.message-btn') }}</span>
108+
<icon name="mdi:message-outline" class="msg-btn__icon" />
109+
</button>
110+
</div>
111+
</template>
112+
<template #action="{ opened }">
113+
<modal-popup :opened="opened" @close="onClose">
114+
<template #content>
115+
<div class="popup__content ">
116+
<textarea
117+
v-model="messageContent"
118+
class="textarea"
119+
rows="4"
120+
:placeholder="t('cart.delivery.message-label')"
121+
>
122+
</textarea>
123+
<button
124+
type="button"
125+
class="modal-btn "
126+
@click="onMessageSubmit"
127+
>
128+
{{t('cart.delivery.message-btn-label')}}
129+
</button>
130+
</div>
131+
</template>
132+
</modal-popup>
133+
</template>
134+
</cart-checkout-delivery-message>
135+
</slot>
136+
</div>
96137
<div class="checkout-delivery__footer">
97-
<button type="button" class="btn btn-ghost" @click="back">
98-
<icon name="left"></icon>
99-
{{ t('cart.back') }}
100-
</button>
138+
<slot name="footer" :back="back" :opened="opened">
139+
<div>
140+
<button type="button" class="btn btn-ghost" @click="back">
141+
<icon name="left"></icon>
142+
{{ t('cart.back') }}
143+
</button>
144+
</div>
145+
</slot>
101146
</div>
102147
</template>
103148
<div v-else class="checkout-delivery__summary">
@@ -121,18 +166,30 @@
121166
</div>
122167
</template>
123168
<script lang="ts" setup>
124-
import { CartTotal, DeliveryGeneric, Spinner } from '#components'
169+
import {
170+
CartTotal,
171+
DeliveryGeneric,
172+
Spinner,
173+
ModalPopup,
174+
CartCheckoutDeliveryMessage
175+
} from '#components'
125176
import type { DeliveryCarrier } from '#models'
177+
import type { Cart } from '@shopinvader/cart'
126178
interface CarrierWithComponent extends DeliveryCarrier {
127179
component: any
128180
carrier: DeliveryCarrier
129181
}
182+
const opened = ref(false)
183+
130184
const emit = defineEmits({
131185
/** Emit to go to the next step */
132186
next: () => true,
133187
/** Emit to go back to the previous step */
134-
back: () => true
188+
back: () => true,
189+
/** Emit to close de popup modal */
190+
close: () => true
135191
})
192+
136193
/**
137194
* Checkout delivery step.
138195
* This component is used in the Checkout funnel.
@@ -159,6 +216,7 @@ const selectedCarrier = ref(null as DeliveryCarrier | null)
159216
const carriers = shallowRef([] as CarrierWithComponent[])
160217
const error = ref(null as string | null)
161218
const loading = ref(false)
219+
const messageContent = ref('')
162220
163221
const hasValidCarrier = computed(() => {
164222
if (selectedCarrier?.value) {
@@ -178,6 +236,28 @@ onMounted(async () => {
178236
await fetchCarriers()
179237
})
180238
239+
const onClose = () => {
240+
opened.value = false
241+
emit('close')
242+
}
243+
const onMessageSubmit = async () => {
244+
const cartService = useShopinvaderService('cart')
245+
const cart = cartService.getCart()
246+
if (cart?.value) {
247+
cart.value.note = messageContent.value
248+
console.log(cart?.value?.note, 'cart')
249+
250+
try {
251+
loading.value = true
252+
if (cart?.value) {
253+
await cartService.update(cart.value)
254+
}
255+
} catch (err) {
256+
console.log(err)
257+
}
258+
}
259+
opened.value = false
260+
}
181261
const next = () => {
182262
if (hasValidCarrier.value) {
183263
emit('next')
@@ -285,14 +365,29 @@ const selectCarrier = async (carrier: DeliveryCarrier) => {
285365
@apply col-span-3 flex flex-col justify-between;
286366
}
287367
&__footer {
288-
@apply col-span-3 flex justify-between;
368+
@apply col-span-3 flex flex-col justify-between;
289369
}
290370
&__error {
291371
@apply col-span-3;
292372
}
293373
&__loading {
294374
@apply col-span-3 flex h-full flex-col items-center justify-center gap-4 md:col-span-2;
295375
}
376+
&__message {
377+
.msg-btn-wrapper {
378+
@apply flex items-center;
379+
.msg-btn {
380+
@apply px-6 btn-outline btn btn-primary btn-sm flex items-center;
381+
&__label {
382+
383+
}
384+
&__icon {
385+
@apply text-[0.85rem];
386+
}
387+
388+
}
389+
}
390+
}
296391
&__summary {
297392
@apply col-span-3 md:col-span-2;
298393
.method {

‎components/cart/checkout/CheckoutDeliveryMessage.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div class="message-wrapper">
3+
<div class="message-wrapper__content">
4+
<slot name="info-message">
5+
<icon name="info" class="message-icon" />
6+
<span class="message-text">{{ t('cart.delivery.message-text') }}</span>
7+
</slot>
8+
<slot name="message-button"> </slot>
9+
</div>
10+
</div>
11+
<slot name="action" :opened="opened"> </slot>
12+
</template>
13+
<script setup lang="ts">
14+
const { t } = useI18n()
15+
defineProps({
16+
opened: {
17+
type: Boolean,
18+
required: true
19+
}
20+
})
21+
</script>
22+
<style lang="scss">
23+
.message-wrapper {
24+
@apply w-full text-xs;
25+
&__content {
26+
@apply flex justify-between items-center rounded border border-info p-4 transition-all duration-300 ease-in-out hover:border-primary hover:shadow-md;
27+
28+
.message-icon {
29+
@apply text-info flex-none mr-1;
30+
31+
}
32+
.message-text {
33+
@apply grow;
34+
}
35+
}
36+
}
37+
</style>

‎components/global/ModalPopup.vue

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<Teleport to="#header-target">
3+
<dialog ref="message" class="modal-popup" :class="classContent">
4+
<div class="modal-box">
5+
<form method="dialog">
6+
<button @click="$emit('close')" class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2">✕</button>
7+
</form>
8+
<slot name="content">
9+
</slot>
10+
</div>
11+
</dialog>
12+
</Teleport>
13+
</template>
14+
<script setup lang="ts">
15+
const message = ref<HTMLElement | null>(null);
16+
const props = defineProps({
17+
opened: {
18+
type: Boolean,
19+
default: false,
20+
required: true,
21+
},
22+
classContent: {
23+
type: String,
24+
default: ''
25+
},
26+
})
27+
watch( () => props.opened, (opened) => {
28+
if(document?.body) {
29+
if (opened) {
30+
message?.value?.showModal()
31+
} else {
32+
message?.value?.close()
33+
}
34+
}
35+
}, { immediate: true });
36+
37+
onMounted(() => {
38+
if(document?.body) {
39+
if (props.opened) {
40+
message?.value.showModal()
41+
} else {
42+
message?.value.close()
43+
}
44+
}
45+
})
46+
const emit = defineEmits(['close', 'submit'])
47+
const submit= () => {
48+
emit('close')
49+
}
50+
const onClose = () => {
51+
emit('close')
52+
}
53+
</script>
54+
55+
<style lang="scss">
56+
.modal-popup {
57+
@apply modal;
58+
}
59+
</style>

‎locales/fr-FR.json

+9
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,10 @@
121121
"discount": "Remise"
122122
},
123123
"delivery": {
124+
"message-btn": "Message",
125+
"message-text": "Un message à nous faire parvenir ?",
126+
"message-label": "Votre message ici...",
127+
"message-btn-label": "Envoyer",
124128
"method": {
125129
"title": "Méthode de livraison",
126130
"intro": "Sélectionnez une méthode de livraison",
@@ -434,5 +438,10 @@
434438
"thankyou_title": "Merci pour votre message !",
435439
"thankyou_description": "Nous reviendrons vers vous au plus vite."
436440
}
441+
},
442+
"modal-popup":{
443+
"title": "Laissez- nous un message",
444+
"placeholder": "Votre message...",
445+
"btn-label": "Envoyer",
437446
}
438447
}

0 commit comments

Comments
 (0)