diff --git a/src/components/molecules/EmailForm.svelte b/src/components/molecules/EmailForm.svelte index 804915e..cd76e0c 100644 --- a/src/components/molecules/EmailForm.svelte +++ b/src/components/molecules/EmailForm.svelte @@ -3,52 +3,101 @@
-
-
diff --git a/src/components/organisms/NewsletterModule.svelte b/src/components/organisms/NewsletterModule.svelte index 36ac3a6..f048ddd 100644 --- a/src/components/organisms/NewsletterModule.svelte +++ b/src/components/organisms/NewsletterModule.svelte @@ -15,7 +15,7 @@
diff --git a/src/routes/api/newsletter.ts b/src/routes/api/newsletter.ts new file mode 100644 index 0000000..df050ce --- /dev/null +++ b/src/routes/api/newsletter.ts @@ -0,0 +1,44 @@ +import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit' + + +// Block GET requests +export async function get({}: RequestEvent): Promise { + return { + status: 403, + body: 'nope!' + } +} + + +/** + * POST request + */ +export async function post ({ request }: RequestEvent): Promise { + const body = await request.text() + + if (body) { + const req = await fetch(`https://emailoctopus.com/api/1.6/lists/${import.meta.env.VITE_NEWSLETTER_LIST_ID}/contacts`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + api_key: import.meta.env.VITE_NEWSLETTER_API_TOKEN, + email_address: body, + }) + }) + const res = await req.json() + + if (res && res.email_address && res.status === 'PENDING') { + return { + status: 200, + body: { + code: 'PENDING' + }, + } + } + + return { + status: 403, + body: res.error, + } + } +} \ No newline at end of file diff --git a/src/style/_typography.scss b/src/style/_typography.scss index dc79b53..72c3312 100644 --- a/src/style/_typography.scss +++ b/src/style/_typography.scss @@ -127,6 +127,18 @@ } } +// XSmall +.text-xsmall { + font-size: rem(16px); + font-weight: 400; + line-height: 1.4; + + @include bp (sm) { + font-size: rem(18px); + line-height: 1.5; + } +} + // Information .text-info { font-size: rem(14px); diff --git a/src/style/molecules/_newsletter-form.scss b/src/style/molecules/_newsletter-form.scss index 6acc5e3..deb2971 100644 --- a/src/style/molecules/_newsletter-form.scss +++ b/src/style/molecules/_newsletter-form.scss @@ -1,5 +1,7 @@ // Email Form .newsletter-form { + position: relative; + &__email { position: relative; width: 100%; @@ -23,7 +25,7 @@ font-size: rem(16px); font-family: $font-sans; font-weight: 300; - color: #333; + color: $color-tertiary; background: none; border: none; @@ -99,4 +101,24 @@ } } } + + // Message + &__message { + padding: 24px; + text-align: center; + border-radius: 8px; + + &.is-error { + position: absolute; + top: 0; + left: 0; + width: 100%; + color: #fff; + background: $color-secondary; + } + &.is-success { + color: $color-text; + background: $color-tertiary; + } + } } \ No newline at end of file diff --git a/src/style/organisms/_newsletter.scss b/src/style/organisms/_newsletter.scss index 43bf9f2..0fe9e2c 100644 --- a/src/style/organisms/_newsletter.scss +++ b/src/style/organisms/_newsletter.scss @@ -46,6 +46,21 @@ } } + // Form input + :global(.newsletter-form__email) { + :global(input) { + color: $color-text; + } + :global(input::placeholder) { + color: $color-gray; + } + } + // Form message + :global(.newsletter-form__message.is-success) { + color: #fff; + background: $color-primary-tertiary20; + } + /* ** Variants @@ -56,10 +71,6 @@ :global(.newsletter-form__email) { background: $color-tertiary; - - :global(input::placeholder) { - color: $color-gray; - } } } // Light diff --git a/src/style/pages/_subscribe.scss b/src/style/pages/_subscribe.scss index 29f86ee..bfd3748 100644 --- a/src/style/pages/_subscribe.scss +++ b/src/style/pages/_subscribe.scss @@ -13,11 +13,6 @@ margin-bottom: 120px; } } - :global(.newsletter-form__email) { - :global(input) { - color: #fff; - } - } :global(.newsletter-form__bottom) { :global(p) { color: rgba($color-tertiary, 0.6);