|
| 1 | +<script setup lang="ts"> |
| 2 | +// Types |
| 3 | +import type { VForm } from 'vuetify/lib/components/VForm/index.mjs' |
| 4 | +
|
| 5 | +import { useId, navigateTo, useDisplay, ref, useNuxtifyConfig, getUtmParams, getBaseUrl, submitFormData, formRules, isExternalUrl, |
| 6 | +} from '#imports' |
| 7 | +
|
| 8 | +// Props |
| 9 | +const props = defineProps({ |
| 10 | + submitUrl: { |
| 11 | + type: String, |
| 12 | + required: true, |
| 13 | + }, |
| 14 | + buttonText: { |
| 15 | + type: String, |
| 16 | + default: 'Subscribe', |
| 17 | + }, |
| 18 | + emailPlaceholder: { |
| 19 | + type: String, |
| 20 | + default: 'Enter your best email', |
| 21 | + }, |
| 22 | + marketingConsentText: { |
| 23 | + type: String, |
| 24 | + default: 'Unsubscribe any time.', |
| 25 | + }, |
| 26 | + showPrivacy: { |
| 27 | + type: Boolean, |
| 28 | + default: false, |
| 29 | + }, |
| 30 | + redirectUrl: { |
| 31 | + type: String, |
| 32 | + default: '', |
| 33 | + }, |
| 34 | + thankYouMessage: { |
| 35 | + type: String, |
| 36 | + default: 'Thanks for signing up!', |
| 37 | + }, |
| 38 | + dark: { |
| 39 | + type: Boolean, |
| 40 | + default: false, |
| 41 | + }, |
| 42 | + appendButtonIcon: { |
| 43 | + type: String, |
| 44 | + default: '', |
| 45 | + }, |
| 46 | + prependButtonIcon: { |
| 47 | + type: String, |
| 48 | + default: '', |
| 49 | + }, |
| 50 | +}) |
| 51 | +
|
| 52 | +// App state |
| 53 | +const id = useId() |
| 54 | +const nuxtifyConfig = useNuxtifyConfig() |
| 55 | +const { xs } = useDisplay() |
| 56 | +
|
| 57 | +// Form state |
| 58 | +const form = ref<VForm>() |
| 59 | +const isSubmitted = ref(false) |
| 60 | +const isError = ref(false) |
| 61 | +const errorMessage = ref('') |
| 62 | +const loading = ref(false) |
| 63 | +const formInput = ref({ |
| 64 | + email: '', |
| 65 | +}) |
| 66 | +
|
| 67 | +// Button style |
| 68 | +const rounded = () => { |
| 69 | + if (nuxtifyConfig.style?.btn?.rounded) { |
| 70 | + return xs.value ? 'lg' : '0 e-lg' |
| 71 | + } |
| 72 | + else { |
| 73 | + return 0 |
| 74 | + } |
| 75 | +} |
| 76 | +
|
| 77 | +async function handleSubmit() { |
| 78 | + loading.value = true |
| 79 | + const res = await form.value?.validate() |
| 80 | + if (res?.valid) { |
| 81 | + const formData = new FormData() |
| 82 | +
|
| 83 | + // Get UTM params |
| 84 | + const { utmSource, utmMedium, utmCampaign, utmTerm, utmContent } |
| 85 | + = getUtmParams(window.location.href) |
| 86 | +
|
| 87 | + // Set form field keys |
| 88 | + // Default |
| 89 | + let fieldPrepend = '' |
| 90 | + let fieldAppend = '' |
| 91 | +
|
| 92 | + // Mailerlite |
| 93 | + if (props.submitUrl.includes('mailerlite')) { |
| 94 | + fieldPrepend = 'fields[' |
| 95 | + fieldAppend = ']' |
| 96 | + } |
| 97 | +
|
| 98 | + // Set form field values |
| 99 | + formData.append( |
| 100 | + `${fieldPrepend}email${fieldAppend}`, |
| 101 | + formInput.value.email, |
| 102 | + ) |
| 103 | + formData.append( |
| 104 | + `${fieldPrepend}referrer${fieldAppend}`, |
| 105 | + getBaseUrl(window.location.href), |
| 106 | + ) |
| 107 | +
|
| 108 | + if (utmSource) |
| 109 | + formData.append(`${fieldPrepend}utm_source${fieldAppend}`, utmSource) |
| 110 | + if (utmMedium) |
| 111 | + formData.append(`${fieldPrepend}utm_medium${fieldAppend}`, utmMedium) |
| 112 | + if (utmCampaign) |
| 113 | + formData.append(`${fieldPrepend}utm_campaign${fieldAppend}`, utmCampaign) |
| 114 | + if (utmTerm) |
| 115 | + formData.append(`${fieldPrepend}utm_term${fieldAppend}`, utmTerm) |
| 116 | + if (utmContent) |
| 117 | + formData.append(`${fieldPrepend}utm_content${fieldAppend}`, utmContent) |
| 118 | +
|
| 119 | + // Send to email provider |
| 120 | + const providerResponse = await submitFormData(props.submitUrl, formData) |
| 121 | + isError.value = providerResponse.isError |
| 122 | + errorMessage.value = providerResponse.errorMessage |
| 123 | +
|
| 124 | + // Redirect |
| 125 | + if (!isError.value && props.redirectUrl) { |
| 126 | + await navigateTo(props.redirectUrl, { |
| 127 | + external: isExternalUrl(props.redirectUrl, nuxtifyConfig.brand?.domain ?? ''), |
| 128 | + }) |
| 129 | + } |
| 130 | + else { |
| 131 | + isSubmitted.value = providerResponse.isSubmitted |
| 132 | + } |
| 133 | + } |
| 134 | + loading.value = false |
| 135 | +} |
| 136 | +</script> |
| 137 | + |
| 138 | +<template> |
| 139 | + <!-- Form --> |
| 140 | + <v-form |
| 141 | + v-if="!isSubmitted" |
| 142 | + ref="form" |
| 143 | + validate-on="submit" |
| 144 | + @submit.prevent="handleSubmit" |
| 145 | + > |
| 146 | + <div class="d-sm-flex justify-center"> |
| 147 | + <!-- Using useId prevents hydration mismatch warnings issue with Vuetify --> |
| 148 | + <!-- See: https://github.com/vuetifyjs/vuetify/issues/19696 --> |
| 149 | + <!-- Once the issue is resolved (and it's used internally in Vuetify), remove use of useId --> |
| 150 | + <v-text-field |
| 151 | + :id |
| 152 | + v-model="formInput.email" |
| 153 | + type="email" |
| 154 | + color="secondary" |
| 155 | + :placeholder="emailPlaceholder" |
| 156 | + :rules="[formRules.required, formRules.validEmail]" |
| 157 | + :rounded="xs ? 't-lg' : '0 ts-lg'" |
| 158 | + hide-details="auto" |
| 159 | + class="text-start" |
| 160 | + > |
| 161 | + <template #message="{ message }"> |
| 162 | + <span :class="dark ? 'text-red-lighten-3' : ''">{{ message }}</span> |
| 163 | + </template> |
| 164 | + </v-text-field> |
| 165 | + <v-btn |
| 166 | + type="submit" |
| 167 | + variant="flat" |
| 168 | + color="secondary" |
| 169 | + size="x-large" |
| 170 | + class="d-flex align-center py-7 mt-2 mt-sm-0" |
| 171 | + :loading |
| 172 | + :rounded="rounded()" |
| 173 | + :append-icon="appendButtonIcon" |
| 174 | + :prepend-icon="prependButtonIcon" |
| 175 | + :block="xs" |
| 176 | + > |
| 177 | + {{ buttonText }} |
| 178 | + </v-btn> |
| 179 | + </div> |
| 180 | + |
| 181 | + <!-- Supporting Text --> |
| 182 | + <div |
| 183 | + v-if="showPrivacy || marketingConsentText" |
| 184 | + :class="`text-body-2 ${ |
| 185 | + dark ? 'text-grey-lighten-2' : 'text-medium-emphasis' |
| 186 | + } mt-2`" |
| 187 | + > |
| 188 | + <span v-if="marketingConsentText"> |
| 189 | + {{ marketingConsentText }} |
| 190 | + </span> |
| 191 | + <span v-if="showPrivacy"> |
| 192 | + By signing up you agree to the |
| 193 | + <NuxtLink |
| 194 | + :to="nuxtifyConfig.pages?.policies?.privacyUrl" |
| 195 | + :class="`text-decoration-none ${ |
| 196 | + dark ? 'text-grey-lighten-2' : 'text-medium-emphasis' |
| 197 | + }`" |
| 198 | + > |
| 199 | + Privacy Policy</NuxtLink>. |
| 200 | + </span> |
| 201 | + </div> |
| 202 | + </v-form> |
| 203 | + |
| 204 | + <!-- Thank You --> |
| 205 | + <div |
| 206 | + v-else |
| 207 | + class="text-body-1" |
| 208 | + > |
| 209 | + {{ thankYouMessage }} |
| 210 | + </div> |
| 211 | +</template> |
| 212 | + |
| 213 | +<style scoped> |
| 214 | +/* Spacing for error message */ |
| 215 | +:deep(.v-input__details) { |
| 216 | + padding-inline: 0px; |
| 217 | +} |
| 218 | +:deep(.v-text-field .v-input__details) { |
| 219 | + padding-inline: 0px; |
| 220 | +} |
| 221 | +
|
| 222 | +/* Hover over links */ |
| 223 | +a:hover { |
| 224 | + text-decoration: underline !important; |
| 225 | +} |
| 226 | +</style> |
0 commit comments