hazo_notify 1.0.0

package/src/app/hazo_notify/emailer_test/page.tsx

@@ -0,0 +1,369 @@
+/**
+ * Emailer test UI page
+ * Allows testing email functionality with a form interface
+ * Displays raw output and response received
+ * Layout: Grid with 3 rows
+ * - Row 1: Header row with general information
+ * - Row 2: Two columns (email input fields + send button | response output)
+ * - Row 3: Email response
+ * - Bottom: Raw message to be sent
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import { toast } from 'sonner';
+import { Send, CheckCircle2, XCircle, Mail, Info } from 'lucide-react';
+
+interface EmailResponse {
+  success: boolean;
+  message_id?: string;
+  message?: string;
+  raw_response?: any;
+  error?: string;
+}
+
+export default function EmailerTestPage() {
+  const [to_email, set_to_email] = useState('');
+  const [subject, set_subject] = useState('');
+  const [text_body, set_text_body] = useState('');
+  const [html_body, set_html_body] = useState('');
+  const [is_loading, set_is_loading] = useState(false);
+  const [response, set_response] = useState<EmailResponse | null>(null);
+  const [raw_output, set_raw_output] = useState<any>(null);
+
+  /**
+   * Handle form submission
+   */
+  const handle_submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Validate form
+    if (!to_email) {
+      toast.error('Recipient email address is required');
+      return;
+    }
+
+    if (!subject) {
+      toast.error('Email subject is required');
+      return;
+    }
+
+    if (!text_body && !html_body) {
+      toast.error('Email content (text or HTML) is required');
+      return;
+    }
+
+    set_is_loading(true);
+    set_response(null);
+    set_raw_output(null);
+
+    try {
+      // Convert newlines to <br> tags in HTML body
+      const processed_html_body = html_body
+        ? html_body.replace(/\n/g, '<br>')
+        : undefined;
+
+      // Prepare request body
+      const request_body = {
+        to: to_email,
+        subject: subject,
+        content: {
+          text: text_body || undefined,
+          html: processed_html_body,
+        },
+      };
+
+      // Store raw output (request) - shows the processed request that will be sent
+      set_raw_output({
+        method: 'POST',
+        url: '/api/hazo_notify/emailer/send',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: request_body,
+      });
+
+      // Make API request
+      const api_response = await fetch('/api/hazo_notify/emailer/send', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(request_body),
+      });
+
+      const response_data = await api_response.json();
+      set_response(response_data);
+
+      // Show toast notification
+      if (response_data.success) {
+        toast.success('Email sent successfully!');
+      } else {
+        toast.error(response_data.error || 'Failed to send email');
+      }
+    } catch (error: any) {
+      const error_message = error?.message || 'Failed to send email';
+      set_response({
+        success: false,
+        error: error_message,
+        message: error_message,
+      });
+      toast.error(error_message);
+    } finally {
+      set_is_loading(false);
+    }
+  };
+
+  return (
+    <div className="cls_emailer_test_container h-full w-full p-6">
+      {/* Row 1: Header row with general information */}
+      <div className="cls_emailer_test_row_1 mb-6">
+        <Card className="cls_emailer_test_header_card">
+          <CardHeader className="cls_emailer_test_header_card_header">
+            <div className="cls_emailer_test_header_title_section flex items-center gap-3">
+              <Mail className="cls_emailer_test_header_icon h-6 w-6" />
+              <CardTitle className="cls_emailer_test_header_title text-2xl">
+                Email Tester
+              </CardTitle>
+            </div>
+            <CardDescription className="cls_emailer_test_header_description mt-2">
+              Test email functionality by sending test emails. Configure your email service in hazo_notify_config.ini
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="cls_emailer_test_header_card_content">
+            <div className="cls_emailer_test_header_info grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="cls_emailer_test_header_info_item flex items-center gap-2">
+                <Info className="cls_emailer_test_header_info_icon h-4 w-4 text-muted-foreground" />
+                <span className="cls_emailer_test_header_info_text text-sm text-muted-foreground">
+                  Status: {response ? (response.success ? 'Success' : 'Failed') : 'Ready'}
+                </span>
+              </div>
+              <div className="cls_emailer_test_header_info_item flex items-center gap-2">
+                <Info className="cls_emailer_test_header_info_icon h-4 w-4 text-muted-foreground" />
+                <span className="cls_emailer_test_header_info_text text-sm text-muted-foreground">
+                  Provider: Zeptomail API
+                </span>
+              </div>
+              <div className="cls_emailer_test_header_info_item flex items-center gap-2">
+                <Info className="cls_emailer_test_header_info_icon h-4 w-4 text-muted-foreground" />
+                <span className="cls_emailer_test_header_info_text text-sm text-muted-foreground">
+                  {response?.message_id ? `Message ID: ${response.message_id}` : 'No message sent yet'}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Row 2: Two columns - email input fields + send button | response output */}
+      <div className="cls_emailer_test_row_2 grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        {/* Column 1: Email input fields and send button */}
+        <Card className="cls_emailer_test_input_card">
+          <CardHeader className="cls_emailer_test_input_card_header">
+            <CardTitle className="cls_emailer_test_input_card_title">Email Configuration</CardTitle>
+            <CardDescription className="cls_emailer_test_input_card_description">
+              Enter email details to send a test email
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="cls_emailer_test_input_card_content">
+            <form onSubmit={handle_submit} className="cls_emailer_test_form space-y-4">
+              <div className="cls_emailer_test_field_to space-y-2">
+                <Label htmlFor="to_email" className="cls_emailer_test_label">
+                  To Email
+                </Label>
+                <Input
+                  id="to_email"
+                  type="email"
+                  placeholder="recipient@example.com"
+                  value={to_email}
+                  onChange={(e) => set_to_email(e.target.value)}
+                  disabled={is_loading}
+                  className="cls_emailer_test_input_to"
+                  required
+                />
+              </div>
+
+              <div className="cls_emailer_test_field_subject space-y-2">
+                <Label htmlFor="subject" className="cls_emailer_test_label">
+                  Subject
+                </Label>
+                <Input
+                  id="subject"
+                  type="text"
+                  placeholder="Email subject"
+                  value={subject}
+                  onChange={(e) => set_subject(e.target.value)}
+                  disabled={is_loading}
+                  className="cls_emailer_test_input_subject"
+                  required
+                />
+              </div>
+
+              <div className="cls_emailer_test_field_text space-y-2">
+                <Label htmlFor="text_body" className="cls_emailer_test_label">
+                  Text Body (optional)
+                </Label>
+                <Textarea
+                  id="text_body"
+                  placeholder="Plain text email content"
+                  value={text_body}
+                  onChange={(e) => set_text_body(e.target.value)}
+                  disabled={is_loading}
+                  className="cls_emailer_test_textarea_text min-h-[120px]"
+                  rows={5}
+                />
+              </div>
+
+              <div className="cls_emailer_test_field_html space-y-2">
+                <Label htmlFor="html_body" className="cls_emailer_test_label">
+                  HTML Body (optional)
+                </Label>
+                <Textarea
+                  id="html_body"
+                  placeholder="HTML email content"
+                  value={html_body}
+                  onChange={(e) => set_html_body(e.target.value)}
+                  disabled={is_loading}
+                  className="cls_emailer_test_textarea_html min-h-[120px]"
+                  rows={5}
+                />
+              </div>
+
+              <div className="cls_emailer_test_actions flex gap-2 pt-4">
+                <Button
+                  type="submit"
+                  disabled={is_loading}
+                  className="cls_emailer_test_button_send"
+                >
+                  {is_loading ? (
+                    <>
+                      <Spinner size="sm" className="mr-2" />
+                      Sending...
+                    </>
+                  ) : (
+                    <>
+                      <Send className="mr-2 h-4 w-4" />
+                      Send Email
+                    </>
+                  )}
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+
+        {/* Column 2: Response output */}
+        <Card className="cls_emailer_test_response_card">
+          <CardHeader className="cls_emailer_test_response_card_header">
+            <CardTitle className="cls_emailer_test_response_card_title">Response Output</CardTitle>
+            <CardDescription className="cls_emailer_test_response_card_description">
+              Response received from the email service
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="cls_emailer_test_response_card_content">
+            {response ? (
+              <div className="cls_emailer_test_response_content space-y-4">
+                <div className="cls_emailer_test_response_status flex items-center gap-2">
+                  {response.success ? (
+                    <>
+                      <CheckCircle2 className="h-5 w-5 text-green-500" />
+                      <span className="cls_emailer_test_response_status_text text-green-600 font-medium">
+                        Success
+                      </span>
+                    </>
+                  ) : (
+                    <>
+                      <XCircle className="h-5 w-5 text-red-500" />
+                      <span className="cls_emailer_test_response_status_text text-red-600 font-medium">
+                        Failed
+                      </span>
+                    </>
+                  )}
+                </div>
+                {response.message && (
+                  <div className="cls_emailer_test_response_message">
+                    <Label className="cls_emailer_test_response_message_label">Message:</Label>
+                    <p className="cls_emailer_test_response_message_text text-sm mt-1">
+                      {response.message}
+                    </p>
+                  </div>
+                )}
+                {response.message_id && (
+                  <div className="cls_emailer_test_response_message_id">
+                    <Label className="cls_emailer_test_response_message_id_label">Message ID:</Label>
+                    <p className="cls_emailer_test_response_message_id_text text-sm mt-1 font-mono">
+                      {response.message_id}
+                    </p>
+                  </div>
+                )}
+                {response.error && (
+                  <div className="cls_emailer_test_response_error">
+                    <Label className="cls_emailer_test_response_error_label text-red-600">Error:</Label>
+                    <p className="cls_emailer_test_response_error_text text-sm mt-1 text-red-600">
+                      {response.error}
+                    </p>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="cls_emailer_test_response_empty text-center text-muted-foreground py-8">
+                <p className="cls_emailer_test_response_empty_text">
+                  No response yet. Send an email to see the response here.
+                </p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Row 3: Email response details */}
+      {response && (
+        <div className="cls_emailer_test_row_3 mb-6">
+          <Card className="cls_emailer_test_response_details_card">
+            <CardHeader className="cls_emailer_test_response_details_card_header">
+              <CardTitle className="cls_emailer_test_response_details_card_title">Email Response Details</CardTitle>
+              <CardDescription className="cls_emailer_test_response_details_card_description">
+                Full response received from the email service
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="cls_emailer_test_response_details_card_content">
+              {response.raw_response && (
+                <div className="cls_emailer_test_response_details_raw">
+                  <pre className="cls_emailer_test_response_details_raw_pre bg-muted p-4 rounded-md overflow-auto text-xs">
+                    {JSON.stringify(response.raw_response, null, 2)}
+                  </pre>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Bottom: Raw message to be sent */}
+      {raw_output && (
+        <div className="cls_emailer_test_bottom">
+          <Card className="cls_emailer_test_raw_message_card">
+            <CardHeader className="cls_emailer_test_raw_message_card_header">
+              <CardTitle className="cls_emailer_test_raw_message_card_title">Raw Message to be Sent</CardTitle>
+              <CardDescription className="cls_emailer_test_raw_message_card_description">
+                Complete request payload that will be sent to the email service
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="cls_emailer_test_raw_message_card_content">
+              <pre className="cls_emailer_test_raw_message_pre bg-muted p-4 rounded-md overflow-auto text-xs">
+                {JSON.stringify(raw_output, null, 2)}
+              </pre>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/hazo_notify/layout.tsx

@@ -0,0 +1,77 @@
+/**
+ * Layout for hazo_notify services
+ * Includes sidebar navigation for all services
+ * Checks if emailer test UI is enabled in config
+ */
+
+'use client';
+
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarNav,
+  SidebarNavItem,
+  SidebarNavLink,
+} from '@/components/ui/sidebar';
+import { Mail } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ServiceItem {
+  title: string;
+  href: string;
+  icon: React.ReactNode;
+}
+
+const services: ServiceItem[] = [
+  {
+    title: 'Email Tester',
+    href: '/hazo_notify/emailer_test',
+    icon: <Mail className="h-4 w-4" />,
+  },
+];
+
+export default function HazoNotifyLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+
+  return (
+    <div className="cls_hazo_notify_layout flex h-screen w-full overflow-hidden">
+      <Sidebar className="cls_hazo_notify_sidebar">
+        <SidebarHeader className="cls_hazo_notify_sidebar_header">
+          <h2 className="cls_hazo_notify_sidebar_title text-lg font-semibold">
+            Hazo Notify
+          </h2>
+        </SidebarHeader>
+        <SidebarContent className="cls_hazo_notify_sidebar_content">
+          <SidebarNav className="cls_hazo_notify_sidebar_nav">
+            {services.map((service) => (
+              <SidebarNavItem key={service.href} className="cls_hazo_notify_sidebar_nav_item">
+                <Link
+                  href={service.href}
+                  className={cn(
+                    "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                    pathname === service.href
+                      ? "bg-accent text-accent-foreground"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  )}
+                >
+                  <span className="cls_hazo_notify_sidebar_nav_link_icon">{service.icon}</span>
+                  <span className="cls_hazo_notify_sidebar_nav_link_text">{service.title}</span>
+                </Link>
+              </SidebarNavItem>
+            ))}
+          </SidebarNav>
+        </SidebarContent>
+      </Sidebar>
+      <main className="cls_hazo_notify_main flex-1 overflow-y-auto bg-background">
+        {children}
+      </main>
+    </div>
+  );
+}

package/src/app/hazo_notify/page.tsx

@@ -0,0 +1,12 @@
+/**
+ * Main hazo_notify page
+ * Shows a blank page under the sidebar layout
+ */
+
+export default function HazoNotifyPage() {
+  return (
+    <div className="cls_hazo_notify_page h-full w-full">
+      {/* Blank page - content can be added here later */}
+    </div>
+  );
+}

package/src/app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { Toaster } from 'sonner';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Hazo Notify',
+  description: 'Email notification service library',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        {children}
+        <Toaster />
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,14 @@
+export default function Home() {
+  return (
+    <div className="cls_home_container flex min-h-screen flex-col items-center justify-center p-24">
+      <div className="cls_home_content z-10 max-w-5xl w-full items-center justify-center font-mono text-sm">
+        <h1 className="cls_home_title text-4xl font-bold text-center mb-4">
+          Hazo Notify
+        </h1>
+        <p className="cls_home_description text-center text-muted-foreground">
+          Email notification service library
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/blocks/editor-00/editor.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import {
+  InitialConfigType,
+  LexicalComposer,
+} from "@lexical/react/LexicalComposer"
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin"
+import { EditorState, SerializedEditorState } from "lexical"
+
+import { editorTheme } from "@/components/editor/themes/editor-theme"
+import { TooltipProvider } from "@/components/ui/tooltip"
+
+import { nodes } from "./nodes"
+import { Plugins } from "./plugins"
+
+const editorConfig: InitialConfigType = {
+  namespace: "Editor",
+  theme: editorTheme,
+  nodes,
+  onError: (error: Error) => {
+    console.error(error)
+  },
+}
+
+export function Editor({
+  editorState,
+  editorSerializedState,
+  onChange,
+  onSerializedChange,
+}: {
+  editorState?: EditorState
+  editorSerializedState?: SerializedEditorState
+  onChange?: (editorState: EditorState) => void
+  onSerializedChange?: (editorSerializedState: SerializedEditorState) => void
+}) {
+  return (
+    <div className="bg-background overflow-hidden rounded-lg border shadow">
+      <LexicalComposer
+        initialConfig={{
+          ...editorConfig,
+          ...(editorState ? { editorState } : {}),
+          ...(editorSerializedState
+            ? { editorState: JSON.stringify(editorSerializedState) }
+            : {}),
+        }}
+      >
+        <TooltipProvider>
+          <Plugins />
+
+          <OnChangePlugin
+            ignoreSelectionChange={true}
+            onChange={(editorState) => {
+              onChange?.(editorState)
+              onSerializedChange?.(editorState.toJSON())
+            }}
+          />
+        </TooltipProvider>
+      </LexicalComposer>
+    </div>
+  )
+}

package/src/components/blocks/editor-00/nodes.ts

@@ -0,0 +1,11 @@
+import { HeadingNode, QuoteNode } from "@lexical/rich-text"
+import {
+  Klass,
+  LexicalNode,
+  LexicalNodeReplacement,
+  ParagraphNode,
+  TextNode,
+} from "lexical"
+
+export const nodes: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement> =
+  [HeadingNode, ParagraphNode, TextNode, QuoteNode]

package/src/components/blocks/editor-00/plugins.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react"
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
+
+import { ContentEditable } from "@/components/editor/editor-ui/content-editable"
+
+export function Plugins() {
+  const [floatingAnchorElem, setFloatingAnchorElem] =
+    useState<HTMLDivElement | null>(null)
+
+  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
+    if (_floatingAnchorElem !== null) {
+      setFloatingAnchorElem(_floatingAnchorElem)
+    }
+  }
+
+  return (
+    <div className="relative">
+      {/* toolbar plugins */}
+      <div className="relative">
+        <RichTextPlugin
+          contentEditable={
+            <div className="">
+              <div className="" ref={onRef}>
+                <ContentEditable placeholder={"Start typing ..."} />
+              </div>
+            </div>
+          }
+          ErrorBoundary={LexicalErrorBoundary}
+        />
+        {/* editor plugins */}
+      </div>
+      {/* actions plugins */}
+    </div>
+  )
+}

package/src/components/editor/editor-ui/content-editable.tsx

@@ -0,0 +1,34 @@
+import { JSX } from "react"
+import { ContentEditable as LexicalContentEditable } from "@lexical/react/LexicalContentEditable"
+
+type Props = {
+  placeholder: string
+  className?: string
+  placeholderClassName?: string
+}
+
+export function ContentEditable({
+  placeholder,
+  className,
+  placeholderClassName,
+}: Props): JSX.Element {
+  return (
+    <LexicalContentEditable
+      className={
+        className ??
+        `ContentEditable__root relative block min-h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none`
+      }
+      aria-placeholder={placeholder}
+      placeholder={
+        <div
+          className={
+            placeholderClassName ??
+            `text-muted-foreground pointer-events-none absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis select-none`
+          }
+        >
+          {placeholder}
+        </div>
+      }
+    />
+  )
+}