Simple front interface to subscribe to the newsletter
This commit is contained in:
parent
30a70c49c0
commit
0ed0726c54
|
@ -0,0 +1,64 @@
|
||||||
|
<template>
|
||||||
|
<section id="newsletter" class="relative pt-10 px-2 container mx-auto px-2">
|
||||||
|
<h2
|
||||||
|
class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100 mt-0"
|
||||||
|
>
|
||||||
|
{{ t("Subscribe to our newsletter") }}
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
{{
|
||||||
|
t("Receive every week in your mailbox an overview of upcoming events")
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
|
<form
|
||||||
|
@submit.prevent="subscribeToNewsletter"
|
||||||
|
class="container my-3 flex flex-wrap flex-col gap-2 sm:flex-row items-stretch gap-2"
|
||||||
|
>
|
||||||
|
<o-input
|
||||||
|
type="email"
|
||||||
|
:placeholder="t('Your email')"
|
||||||
|
required
|
||||||
|
v-model="emailValue"
|
||||||
|
/>
|
||||||
|
<o-button native-type="submit" icon-left="email">
|
||||||
|
{{ t("Subscribe") }}
|
||||||
|
</o-button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { useMutation } from "@vue/apollo-composable";
|
||||||
|
import { CREATE_SUBSCRIBER } from "../../graphql/subscriber";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const { t } = useI18n({ useScope: "global" });
|
||||||
|
|
||||||
|
const emailValue = ref<string>();
|
||||||
|
|
||||||
|
const {
|
||||||
|
mutate: subscribeToNewsletterMutation,
|
||||||
|
onDone: subscribeToNewsletterDone,
|
||||||
|
onError: subscribeToNewsletterError,
|
||||||
|
} = useMutation(CREATE_SUBSCRIBER);
|
||||||
|
|
||||||
|
subscribeToNewsletterDone(() => {
|
||||||
|
alert(t("You subscribed to the newsletter"));
|
||||||
|
});
|
||||||
|
|
||||||
|
subscribeToNewsletterError((err) => {
|
||||||
|
console.error(err);
|
||||||
|
if (err.graphQLErrors) {
|
||||||
|
err.graphQLErrors.forEach(({ message }: { message: string }) => {
|
||||||
|
alert(message);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const subscribeToNewsletter = () => {
|
||||||
|
subscribeToNewsletterMutation({
|
||||||
|
email: emailValue.value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -0,0 +1,10 @@
|
||||||
|
import gql from "graphql-tag";
|
||||||
|
|
||||||
|
export const CREATE_SUBSCRIBER = gql`
|
||||||
|
mutation CreateSubscriber($email: String!) {
|
||||||
|
createSubscriber(email: $email) {
|
||||||
|
id
|
||||||
|
email
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
|
@ -144,26 +144,7 @@
|
||||||
<CloseGroups :userLocation="userLocation" @doGeoLoc="performGeoLocation()" />
|
<CloseGroups :userLocation="userLocation" @doGeoLoc="performGeoLocation()" />
|
||||||
<OnlineEvents />
|
<OnlineEvents />
|
||||||
<LastEvents v-if="instanceName" :instanceName="instanceName" />
|
<LastEvents v-if="instanceName" :instanceName="instanceName" />
|
||||||
<section id="newsletter" class="relative pt-10 px-2 container mx-auto px-2">
|
<NewsletterFields />
|
||||||
<h2
|
|
||||||
class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100 mt-0"
|
|
||||||
>
|
|
||||||
{{ t("Subscribe to our newsletter") }}
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
{{
|
|
||||||
t("Receive every week in your mailbox an overview of upcoming events")
|
|
||||||
}}
|
|
||||||
</p>
|
|
||||||
<form
|
|
||||||
class="container my-3 flex flex-wrap flex-col gap-2 sm:flex-row items-stretch gap-2"
|
|
||||||
>
|
|
||||||
<o-input type="email" :placeholder="t('Your email')" />
|
|
||||||
<o-button native-type="submit" icon-left="email">
|
|
||||||
{{ t("Subscribe") }}
|
|
||||||
</o-button>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -202,6 +183,7 @@ import { LocationType } from "@/types/user-location.model";
|
||||||
import CategoriesPreview from "@/components/Home/CategoriesPreview.vue";
|
import CategoriesPreview from "@/components/Home/CategoriesPreview.vue";
|
||||||
import UnloggedIntroduction from "@/components/Home/UnloggedIntroduction.vue";
|
import UnloggedIntroduction from "@/components/Home/UnloggedIntroduction.vue";
|
||||||
import SearchFields from "@/components/Home/SearchFields.vue";
|
import SearchFields from "@/components/Home/SearchFields.vue";
|
||||||
|
import NewsletterFields from "@/components/Home/NewsletterFields.vue";
|
||||||
import { useHead } from "@unhead/vue";
|
import { useHead } from "@unhead/vue";
|
||||||
import { geoHashToCoords } from "@/utils/location";
|
import { geoHashToCoords } from "@/utils/location";
|
||||||
import { useServerProvidedLocation } from "@/composition/apollo/config";
|
import { useServerProvidedLocation } from "@/composition/apollo/config";
|
||||||
|
|
Loading…
Reference in New Issue