From e76eae360fc78a98c5f55b5ff613f8594be1764a Mon Sep 17 00:00:00 2001
From: Romain Lanz <romain.lanz@pm.me>
Date: Fri, 20 Dec 2024 23:00:44 +0100
Subject: [PATCH] feat(design-system:newsletter_form): add base component

---
 packages/design-system/.storybook/preview.ts  |  4 ++
 packages/design-system/package.json           |  2 +-
 .../footer/footer.stories.ts                  |  2 +-
 .../footer/footer.vue                         | 13 +++++
 .../footer/footer_section.vue                 |  0
 .../footer/social_network.vue                 |  0
 .../newsletter_confirmation_dialog.vue        | 54 +++++++++++++++++++
 .../newsletter_form.stories.ts                | 13 +++++
 .../newsletter_form/newsletter_form.vue       | 27 ++++++++++
 9 files changed, 113 insertions(+), 2 deletions(-)
 rename packages/design-system/src/{molecules => organisms}/footer/footer.stories.ts (90%)
 rename packages/design-system/src/{molecules => organisms}/footer/footer.vue (88%)
 rename packages/design-system/src/{molecules => organisms}/footer/footer_section.vue (100%)
 rename packages/design-system/src/{molecules => organisms}/footer/social_network.vue (100%)
 create mode 100644 packages/design-system/src/organisms/newsletter_form/newsletter_confirmation_dialog.vue
 create mode 100644 packages/design-system/src/organisms/newsletter_form/newsletter_form.stories.ts
 create mode 100644 packages/design-system/src/organisms/newsletter_form/newsletter_form.vue

diff --git a/packages/design-system/.storybook/preview.ts b/packages/design-system/.storybook/preview.ts
index d085ed7..456ee9e 100644
--- a/packages/design-system/.storybook/preview.ts
+++ b/packages/design-system/.storybook/preview.ts
@@ -3,6 +3,10 @@ import 'virtual:uno.css';
 
 import type { Preview } from '@storybook/vue3';
 
+globalThis.RomainLanz = {
+	appUrl: 'http://romainlanz.localhost:3333',
+};
+
 const preview: Preview = {
 	parameters: {
 		layout: 'centered',
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 4dc785b..ee13a82 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -31,10 +31,10 @@
 		"./dialog": "./src/molecules/dialog/dialog.vue",
 		"./field": "./src/molecules/field/field.vue",
 		"./field-select": "./src/molecules/field_select/field_select.vue",
-		"./footer": "./src/molecules/footer/footer.vue",
 		"./headline": "./src/molecules/headline/headline.vue",
 		"./pagination": "./src/molecules/pagination/pagination.vue",
 		"./user-action-menu": "./src/molecules/user_action_menu/user_action_menu.vue",
+    "./footer": "./src/organisms/footer/footer.vue",
 		"./top-bar": "./src/organisms/top_bar/top_bar.vue"
 	},
 	"scripts": {
diff --git a/packages/design-system/src/molecules/footer/footer.stories.ts b/packages/design-system/src/organisms/footer/footer.stories.ts
similarity index 90%
rename from packages/design-system/src/molecules/footer/footer.stories.ts
rename to packages/design-system/src/organisms/footer/footer.stories.ts
index 1f68ca6..ee4db5b 100644
--- a/packages/design-system/src/molecules/footer/footer.stories.ts
+++ b/packages/design-system/src/organisms/footer/footer.stories.ts
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3';
 
 const meta = {
 	component: Footer,
-	title: 'Molecules/Footer',
+	title: 'Organisms/Footer',
 	parameters: {
 		layout: 'padded',
 	},
diff --git a/packages/design-system/src/molecules/footer/footer.vue b/packages/design-system/src/organisms/footer/footer.vue
similarity index 88%
rename from packages/design-system/src/molecules/footer/footer.vue
rename to packages/design-system/src/organisms/footer/footer.vue
index 1049ea6..63c8abf 100644
--- a/packages/design-system/src/molecules/footer/footer.vue
+++ b/packages/design-system/src/organisms/footer/footer.vue
@@ -4,9 +4,18 @@
 	import FooterSection from './footer_section.vue';
 	import SocialNetwork from './social_network.vue';
 	import { client } from '@rlanz/rpc/client';
+	import NewsletterForm from '../newsletter_form/newsletter_form.vue';
+
+	const emit = defineEmits<{
+		register: [email: string];
+	}>();
 
 	const contactUrl = client.$url('pages.contact');
 	const aboutUrl = client.$url('pages.about');
+
+	function onRegister(email: string) {
+		emit('register', email);
+	}
 </script>
 
 <template>
@@ -61,6 +70,10 @@
 						</li>
 					</ul>
 				</FooterSection>
+
+				<FooterSection title="Newsletter">
+					<NewsletterForm @register="onRegister" />
+				</FooterSection>
 			</div>
 
 			<hr class="h-1px border-none bg-gray-800 my-12" />
diff --git a/packages/design-system/src/molecules/footer/footer_section.vue b/packages/design-system/src/organisms/footer/footer_section.vue
similarity index 100%
rename from packages/design-system/src/molecules/footer/footer_section.vue
rename to packages/design-system/src/organisms/footer/footer_section.vue
diff --git a/packages/design-system/src/molecules/footer/social_network.vue b/packages/design-system/src/organisms/footer/social_network.vue
similarity index 100%
rename from packages/design-system/src/molecules/footer/social_network.vue
rename to packages/design-system/src/organisms/footer/social_network.vue
diff --git a/packages/design-system/src/organisms/newsletter_form/newsletter_confirmation_dialog.vue b/packages/design-system/src/organisms/newsletter_form/newsletter_confirmation_dialog.vue
new file mode 100644
index 0000000..1fe7797
--- /dev/null
+++ b/packages/design-system/src/organisms/newsletter_form/newsletter_confirmation_dialog.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+	import { computed, ref, unref } from 'vue';
+	import Button from '../../atoms/button/button.vue';
+	import Dialog from '../../molecules/dialog/dialog.vue';
+	import Checkbox from '../../atoms/checkbox/checkbox.vue';
+	import Field from '../../molecules/field/field.vue';
+
+	const emit = defineEmits<{
+		accepted: [];
+	}>();
+
+	const email = defineModel<string>({ required: true });
+
+	const open = ref(false);
+	const acceptTerms = ref(false);
+
+	const isFormValid = computed(() => {
+		return acceptTerms.value && unref(email).length > 1;
+	});
+
+	function handleSubmit() {
+		emit('accepted');
+		open.value = false;
+	}
+</script>
+
+<template>
+	<Dialog title="Confirmez votre inscription" v-model="open">
+		<template #trigger>
+			<Button size="extraSmall">S'abonner</Button>
+		</template>
+
+		<template #content>
+			<form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+				<Field v-model="email" label="Adresse email" type="email" />
+
+				<Checkbox v-model="acceptTerms" label="J'accepte de recevoir la newsletter de RomainLanz" />
+
+				<p class="text-sm text-gray-700">
+					Nous utilisons Brevo en tant que plateforme marketing. En soumettant ce formulaire, vous acceptez que les
+					données personnelles que vous avez fournies soient transférées à Brevo pour être traitées conformément à la
+					<a class="underline" href="https://www.brevo.com/fr/legal/privacypolicy" target="_blank" rel="nofollow">
+						politique de confidentialité
+					</a>
+					de Brevo.
+				</p>
+
+				<div class="flex justify-end">
+					<Button color="violet" size="small" type="submit" :disabled="!isFormValid">S'abonner</Button>
+				</div>
+			</form>
+		</template>
+	</Dialog>
+</template>
diff --git a/packages/design-system/src/organisms/newsletter_form/newsletter_form.stories.ts b/packages/design-system/src/organisms/newsletter_form/newsletter_form.stories.ts
new file mode 100644
index 0000000..bab7650
--- /dev/null
+++ b/packages/design-system/src/organisms/newsletter_form/newsletter_form.stories.ts
@@ -0,0 +1,13 @@
+import NewsletterForm from './newsletter_form.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+const meta = {
+	component: NewsletterForm,
+	title: 'Organisms/NewsletterForm',
+} satisfies Meta<typeof NewsletterForm>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Base: Story = {};
diff --git a/packages/design-system/src/organisms/newsletter_form/newsletter_form.vue b/packages/design-system/src/organisms/newsletter_form/newsletter_form.vue
new file mode 100644
index 0000000..d9c76b8
--- /dev/null
+++ b/packages/design-system/src/organisms/newsletter_form/newsletter_form.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+	import { ref, unref } from 'vue';
+	import NewsletterConfirmationDialog from './newsletter_confirmation_dialog.vue';
+	import Field from '../../molecules/field/field.vue';
+
+	const emit = defineEmits<{
+		register: [email: string];
+	}>();
+
+	const email = ref('');
+
+	function onAccept() {
+		emit('register', unref(email));
+	}
+</script>
+
+<template>
+	<div class="flex flex-col gap-10 w-min">
+		<p>Abonne-toi pour recevoir les dernières tendances et ressources pour ta veille technique.</p>
+
+		<div class="flex gap-4">
+			<Field class="h-full" v-model="email" placeholder="hello@romainlanz.com" type="email" />
+
+			<NewsletterConfirmationDialog v-model="email" @accepted="onAccept" />
+		</div>
+	</div>
+</template>