@xenterprises/nuxt-x-marketing 0.0.21 → 0.0.22
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.
|
@@ -1,48 +1,53 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
<UHeader>
|
|
3
|
+
<template #title>
|
|
4
|
+
<nuxt-link to="/" v-if="header?.logo?.src">
|
|
5
|
+
<UColorModeImage
|
|
6
|
+
:light="header?.logo?.src"
|
|
7
|
+
:dark="
|
|
8
|
+
header?.logo?.srcDark ? header?.logo?.srcDark : header?.logo?.src
|
|
9
|
+
"
|
|
10
|
+
:alt="header?.logo?.alt"
|
|
11
|
+
class="h-8"
|
|
12
|
+
/>
|
|
13
|
+
</nuxt-link>
|
|
14
|
+
<span v-else>{{ header?.logo?.alt }}</span>
|
|
15
|
+
</template>
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
<span v-for="(button, index) in header?.nav?.buttons" :key="index"
|
|
19
|
-
><UButton
|
|
20
|
-
class="hidden md:flex md:items-center md:justify-center py-2"
|
|
21
|
-
:to="button?.to"
|
|
22
|
-
:icon="button?.icon ? button?.icon : null"
|
|
23
|
-
:target="button?.target ? button?.target : '_self'"
|
|
24
|
-
:color="button?.color ? button?.color : 'primary'"
|
|
25
|
-
:variant="button?.variant ? button?.variant : 'solid'"
|
|
26
|
-
>{{ button?.label }}</UButton
|
|
27
|
-
></span
|
|
28
|
-
>
|
|
29
|
-
</template>
|
|
17
|
+
<UNavigationMenu :items="links" />
|
|
30
18
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
19
|
+
<template #right>
|
|
20
|
+
<span v-for="(button, index) in header?.nav?.buttons" :key="index"
|
|
21
|
+
><UButton
|
|
22
|
+
class="hidden md:flex md:items-center md:justify-center py-2"
|
|
23
|
+
:to="button?.to"
|
|
24
|
+
:icon="button?.icon ? button?.icon : null"
|
|
25
|
+
:target="button?.target ? button?.target : '_self'"
|
|
26
|
+
:color="button?.color ? button?.color : 'primary'"
|
|
27
|
+
:variant="button?.variant ? button?.variant : 'solid'"
|
|
28
|
+
>{{ button?.label }}</UButton
|
|
29
|
+
></span
|
|
30
|
+
>
|
|
31
|
+
</template>
|
|
32
|
+
|
|
33
|
+
<template #body>
|
|
34
|
+
<UNavigationMenu orientation="vertical" :items="links" class="-mx-2.5" />
|
|
35
|
+
<div class="mt-5 space-y-2">
|
|
36
|
+
<UButton
|
|
37
|
+
v-for="(button, index) in header?.nav?.buttons"
|
|
38
|
+
:key="index"
|
|
39
|
+
class="w-full justify-center"
|
|
40
|
+
:to="button?.to"
|
|
41
|
+
:icon="button?.icon ? button?.icon : null"
|
|
42
|
+
:target="button?.target ? button?.target : '_self'"
|
|
43
|
+
:color="button?.color ? button?.color : 'primary'"
|
|
44
|
+
:variant="button?.variant ? button?.variant : 'solid'"
|
|
45
|
+
>
|
|
46
|
+
{{ button?.label }}
|
|
47
|
+
</UButton>
|
|
48
|
+
</div>
|
|
49
|
+
</template>
|
|
50
|
+
</UHeader>
|
|
46
51
|
</template>
|
|
47
52
|
|
|
48
53
|
<script setup>
|
|
@@ -1,129 +1,129 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
2
|
+
<div class="py-24">
|
|
3
|
+
<main class="container mx-auto">
|
|
4
|
+
<section
|
|
5
|
+
class="py-24 rounded-3xl border-primary border max-w-screen-2xl"
|
|
6
|
+
:class="cardClass"
|
|
7
|
+
:style="cardStyle"
|
|
8
|
+
>
|
|
9
|
+
<div
|
|
10
|
+
class="flex flex-col items-center justify-center"
|
|
11
|
+
v-if="!submitted"
|
|
12
|
+
>
|
|
13
|
+
<h2 class="text-4xl font-bold text-center text-primary">
|
|
14
|
+
{{ heading }}
|
|
15
|
+
</h2>
|
|
16
|
+
<p class="mt-4 text-center text-gray-800 dark:text-gray-100">
|
|
17
|
+
{{ subheading }}
|
|
18
|
+
</p>
|
|
19
|
+
<UForm
|
|
20
|
+
class="mt-8 flex flex-col items-center justify-center w-full max-w-lg"
|
|
21
|
+
:schema="schema"
|
|
22
|
+
:state="state"
|
|
23
|
+
@submit="onSubmit"
|
|
24
|
+
>
|
|
25
|
+
<div class="w-full text-center">
|
|
26
|
+
<UFormField label="" name="email" class="w-full">
|
|
27
|
+
<UInput
|
|
28
|
+
padded
|
|
29
|
+
placeholder="Enter your email"
|
|
30
|
+
icon="i-heroicons-envelope"
|
|
31
|
+
size="xl"
|
|
32
|
+
class="w-full flex-1"
|
|
33
|
+
v-model="state.email"
|
|
34
|
+
:loading="loading"
|
|
35
|
+
:disabled="disabled"
|
|
36
|
+
/>
|
|
37
|
+
</UFormField>
|
|
38
|
+
<UButton
|
|
39
|
+
type="submit"
|
|
40
|
+
size="xl"
|
|
41
|
+
class="mt-6"
|
|
42
|
+
:label="submitLabel"
|
|
43
|
+
/>
|
|
44
|
+
</div>
|
|
45
|
+
</UForm>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="text-center text-2xl" v-else>
|
|
48
|
+
<div class="text-3xl font-bold">Done!</div>
|
|
49
|
+
You have successfully subscribed.
|
|
50
|
+
</div>
|
|
51
|
+
</section>
|
|
52
|
+
</main>
|
|
53
|
+
</div>
|
|
54
54
|
</template>
|
|
55
55
|
<script setup>
|
|
56
56
|
import { z } from "zod";
|
|
57
57
|
const toast = useToast();
|
|
58
58
|
const props = defineProps({
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
59
|
+
heading: {
|
|
60
|
+
type: String,
|
|
61
|
+
default: "Stay Up To Date",
|
|
62
|
+
},
|
|
63
|
+
subheading: {
|
|
64
|
+
type: String,
|
|
65
|
+
default: "Stay up to date with our latest news and product announcements.",
|
|
66
|
+
},
|
|
67
|
+
submitLabel: {
|
|
68
|
+
type: String,
|
|
69
|
+
default: "Subscribe",
|
|
70
|
+
},
|
|
71
|
+
cardClass: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: `bg-fit bg-center bg-no-repeat bg-primary/5`,
|
|
74
|
+
},
|
|
75
|
+
cardStyle: {
|
|
76
|
+
type: String,
|
|
77
|
+
default: `background-image: url('https://cdn.x.enterprises/bg-subscription-poof2.webp');`,
|
|
78
|
+
},
|
|
79
|
+
organizationId: {
|
|
80
|
+
type: String,
|
|
81
|
+
required: true,
|
|
82
|
+
},
|
|
83
|
+
endpoint: {
|
|
84
|
+
type: String,
|
|
85
|
+
default: "https://api.emailmarketingnewsletters.com",
|
|
86
|
+
},
|
|
87
87
|
});
|
|
88
88
|
|
|
89
89
|
const schema = z.object({
|
|
90
|
-
|
|
90
|
+
email: z.string().email("Invalid email"),
|
|
91
91
|
});
|
|
92
92
|
|
|
93
93
|
// type Schema = z.output<typeof schema>;
|
|
94
94
|
|
|
95
95
|
const state = reactive({
|
|
96
|
-
|
|
96
|
+
email: undefined,
|
|
97
97
|
});
|
|
98
98
|
|
|
99
99
|
async function onSubmit(event) {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
100
|
+
loading.value = true;
|
|
101
|
+
disabled.value = true;
|
|
102
|
+
try {
|
|
103
|
+
await $fetch(`${props.endpoint}/public/subscriptions/subscribe`, {
|
|
104
|
+
method: "POST",
|
|
105
|
+
body: JSON.stringify({
|
|
106
|
+
email: state.email,
|
|
107
|
+
organizationId: props.organizationId,
|
|
108
|
+
}),
|
|
109
|
+
});
|
|
110
|
+
submitted.value = true;
|
|
111
|
+
toast.add({
|
|
112
|
+
icon: "i-heroicons-check-badge",
|
|
113
|
+
title: "You have successfully subscribed to our newsletter.",
|
|
114
|
+
});
|
|
115
|
+
} catch (error) {
|
|
116
|
+
console.log(error);
|
|
117
|
+
toast.add({
|
|
118
|
+
icon: "i-heroicons-exclamation-circle-solid",
|
|
119
|
+
title: `An error occurred or you've already subscribed.`,
|
|
120
|
+
});
|
|
121
|
+
} finally {
|
|
122
|
+
loading.value = false;
|
|
123
|
+
disabled.value = false;
|
|
124
|
+
}
|
|
125
125
|
}
|
|
126
126
|
const loading = ref(false);
|
|
127
127
|
const disabled = ref(false);
|
|
128
128
|
const submitted = ref(false);
|
|
129
|
-
</script>
|
|
129
|
+
</script>
|