wip

Vizzuality · Dec 30, 2024 · fcde407 · fcde407
1 parent 2ad5de3
commit fcde407
Show file tree

Hide file tree

Showing 115 changed files with 3,097 additions and 162 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@floating-ui/core": "1.2.6",
     "@headlessui-float/react": "0.11.2",
     "@headlessui/react": "1.7.15",
+    "@hookform/resolvers": "^3.9.1",
     "@mapbox/mapbox-gl-draw": "1.4.1",
     "@mdx-js/loader": "2.3.0",
     "@mdx-js/react": "2.3.0",
@@ -37,6 +38,7 @@
     "@radix-ui/react-dropdown-menu": "2.0.4",
     "@radix-ui/react-hover-card": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "1.0.5",
     "@radix-ui/react-progress": "^1.0.2",
     "@radix-ui/react-radio-group": "1.1.2",
@@ -46,6 +48,7 @@
     "@radix-ui/react-switch": "^1.0.2",
     "@radix-ui/react-toggle": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.5",
+    "@react-email/components": "0.0.31",
     "@tailwindcss/forms": "0.5.3",
     "@tailwindcss/line-clamp": "0.4.2",
     "@tailwindcss/typography": "0.5.9",
@@ -74,20 +77,24 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
+    "react-email": "3.0.4",
+    "react-hook-form": "^7.54.2",
     "react-map-gl": "7.0.21",
     "react-markdown": "^9.0.1",
     "react-toastify": "^10.0.5",
     "react-virtualized": "9.22.5",
     "recharts": "^2.5.0",
     "recoil": "^0.7.7",
     "recoil-sync": "0.2.0",
+    "resend": "^4.0.1",
     "shadcn-ui": "latest",
     "tailwind-merge": "1.11.0",
     "tailwind-scrollbar-hide": "1.1.7",
     "tailwindcss": "3.2.7",
     "tailwindcss-animate": "^1.0.5",
     "use-debounce": "9.0.3",
-    "usehooks-ts": "2.9.1"
+    "usehooks-ts": "2.9.1",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.41.0",

diff --git a/src/components/chart/index.tsx b/src/components/chart/index.tsx
@@ -1,6 +1,6 @@
 import { createElement } from 'react';
 
-import cn from 'lib/classnames';
+import { cn } from 'lib/classnames';
 
 import {
   PieChart,

diff --git a/src/components/chart/tooltip/index.tsx b/src/components/chart/tooltip/index.tsx
@@ -1,4 +1,4 @@
-import cn from 'lib/classnames';
+import { cn } from 'lib/classnames';
 type TooltipProps = {
   payload: {
     payload: {

diff --git a/src/components/contact/actions.ts b/src/components/contact/actions.ts
@@ -0,0 +1,72 @@
+'use server';
+
+import { z } from 'zod';
+
+import mailchimp from '@/lib/mailchimp';
+
+import { NewsletterSchema } from '@/containers/newsletter/index';
+
+export const contactFormActions = async (
+  email: z.infer<typeof NewsletterSchema>['email'],
+  mergeFields: {
+    FNAME: string;
+    LNAME: string;
+    ORG_TYPE?: string | undefined;
+    ORG_TYPE_O?: string | undefined;
+  }
+) => {
+  try {
+    await mailchimp.lists.addListMember('77ab6984cf', {
+      status: 'subscribed',
+      email_address: email,
+      merge_fields: {
+        ...mergeFields,
+      },
+    });
+
+    return {
+      ok: true,
+    };
+  } catch (err) {
+    if (err instanceof Error) {
+      return {
+        ok: false,
+        message: err.message,
+      };
+    }
+
+    return {
+      ok: false,
+      message: 'Error sending contact form',
+    };
+  }
+};
+
+export default contactFormActions;
+
+import { Resend } from 'resend';
+import * as React from 'react';
+import { ContactUsEmail } from 'components/contact/email-template';
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export async function POST(req: Request) {
+  const payload = await req.json();
+
+  try {
+    const { data, error } = await resend.emails.send({
+      from: '[email protected]',
+      to: payload.email,
+      subject: `Thank you for contacting us, ${payload.name}`,
+      react: ContactUsEmail(payload),
+    });
+
+    if (error) {
+      return Response.json({ error });
+    }
+
+    return Response.json({ data });
+  } catch (error) {
+    return Response.json({ error });
+  }
+}
diff --git a/src/components/contact/email-template.tsx b/src/components/contact/email-template.tsx
@@ -0,0 +1,52 @@
+import { Body, Container, Head, Html, Markdown, Preview, Text } from '@react-email/components';
+import { CSSProperties } from 'react';
+
+interface ContactUsEmailProps {
+  name: string;
+  email: string;
+  message: string;
+}
+
+export const ContactUsEmail = ({ name, email, message }: ContactUsEmailProps) => (
+  <Html>
+    <Head />
+    <Preview>Thanks for contacting us {name}!</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Text style={paragraph}>Hi {name},</Text>
+        <Text style={paragraph}>We have received your message</Text>
+        <Markdown
+          markdownContainerStyles={{
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.05)',
+            borderRadius: '8px',
+            padding: '20px',
+            backgroundColor: '#f3f4f6',
+            border: '1px solid #e5e7eb',
+          }}
+        >
+          {message}
+        </Markdown>
+        <Text style={paragraph}>We will get back to you as soon as possible at {email}.</Text>
+      </Container>
+    </Body>
+  </Html>
+);
+
+const main: CSSProperties = {
+  backgroundColor: '#ffffff',
+  borderRadius: '8px',
+  border: '1px solid #e5e7eb',
+  boxShadow: '0 0 10px rgba(0, 0, 0, 0.05)',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+};
+
+const container: CSSProperties = {
+  margin: '0 auto',
+  padding: '20px 0 48px',
+};
+
+const paragraph: CSSProperties = {
+  fontSize: '16px',
+  lineHeight: '26px',
+};