@xenterprises/nuxt-x-marketing 0.0.13 → 0.0.14
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.
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<template>
|
|
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
|
+
<UFormGroup 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
|
+
</UFormGroup>
|
|
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
|
+
</template>
|
|
55
|
+
<script setup>
|
|
56
|
+
import { z } from "zod";
|
|
57
|
+
const toast = useToast();
|
|
58
|
+
const props = defineProps({
|
|
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
|
+
});
|
|
88
|
+
|
|
89
|
+
const schema = z.object({
|
|
90
|
+
email: z.string().email("Invalid email"),
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
// type Schema = z.output<typeof schema>;
|
|
94
|
+
|
|
95
|
+
const state = reactive({
|
|
96
|
+
email: undefined,
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
async function onSubmit(event) {
|
|
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
|
+
}
|
|
126
|
+
const loading = ref(false);
|
|
127
|
+
const disabled = ref(false);
|
|
128
|
+
const submitted = ref(false);
|
|
129
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xenterprises/nuxt-x-marketing",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.14",
|
|
5
5
|
"main": "./nuxt.config.ts",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"dev": "nuxi dev .playground",
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"@nuxt/ui": "^2.18.7",
|
|
21
21
|
"@nuxt/ui-pro": "^1.4.4",
|
|
22
22
|
"@nuxtjs/seo": "^2.0.0-rc.23",
|
|
23
|
-
"simple-icons": "^13.15.0"
|
|
23
|
+
"simple-icons": "^13.15.0",
|
|
24
|
+
"zod": "^3.23.8"
|
|
24
25
|
}
|
|
25
26
|
}
|