Add email subscription

BTI-US · Apr 25, 2024 · 966e65f · 966e65f
1 parent d37b951
commit 966e65f
Show file tree

Hide file tree

Showing 7 changed files with 384 additions and 17 deletions.
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
@@ -86,9 +86,9 @@ jobs:
       run: npm install && npm run build
       env:
         VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }}
-        ACTIVE_NETWORK: ${{ secrets.ACTIVE_NETWORK }}
-        EMAIL_TOKEN: ${{ secrets.EMAIL_TOKEN }}
-        AUTH_WEB_ADDRESS: ${{ secrets.AUTH_WEB_ADDRESS }}
+        VITE_ACTIVE_NETWORK: ${{ secrets.ACTIVE_NETWORK }}
+        VITE_EMAIL_TOKEN: ${{ secrets.EMAIL_TOKEN }}
+        VITE_AUTH_WEB_ADDRESS: ${{ secrets.AUTH_WEB_ADDRESS }}
 
     - name: Perform CodeQL Analysis
       uses: github/codeql-action/analyze@v3

diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -51,9 +51,9 @@ jobs:
         run: npm run build
         env:
           VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }}
-          ACTIVE_NETWORK: ${{ secrets.ACTIVE_NETWORK }}
-          EMAIL_TOKEN: ${{ secrets.EMAIL_TOKEN }}
-          AUTH_WEB_ADDRESS: ${{ secrets.AUTH_WEB_ADDRESS }}
+          VITE_ACTIVE_NETWORK: ${{ secrets.ACTIVE_NETWORK }}
+          VITE_EMAIL_TOKEN: ${{ secrets.EMAIL_TOKEN }}
+          VITE_AUTH_WEB_ADDRESS: ${{ secrets.AUTH_WEB_ADDRESS }}
 
       - name: Setup Pages
         uses: actions/configure-pages@v5

diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ Refer to the [Web3Modal SDK for React](https://docs.walletconnect.com/web3modal/
 
 ## Roadmap
 
-- [ ] Add WalletConnect support.
+- [x] Add WalletConnect support and address display.
 - [ ] Add activation code generation request and respond to the webpage.
 - [ ] Add Email subscription service (using EmailJS and Postcard).
 

diff --git a/email/index.html b/email/index.html
diff --git a/src/components/forms/LoginForm.tsx b/src/components/forms/LoginForm.tsx
@@ -62,8 +62,6 @@ const LoginForm = () => {
     }
     let previousAddress: string | null | undefined = null;
 
-    // const accounts = getAccount(config);
-    // const walletAddress = accounts.address;
     watchAccount(config, {
       // Only watch the address changes
 
@@ -85,6 +83,7 @@ const LoginForm = () => {
     })
   };
 
+   // TODO: Switch to the account page 
    return (
       <WagmiProvider config={config}>
         <QueryClientProvider client={queryClient}>

diff --git a/src/components/forms/NewsletterForm.tsx b/src/components/forms/NewsletterForm.tsx
@@ -3,6 +3,10 @@ import * as yup from "yup";
 import { useForm } from "react-hook-form";
 import { yupResolver } from '@hookform/resolvers/yup';
 
+const emailToken = import.meta.env.VITE_EMAIL_TOKEN as string;
+const emailServiceID = import.meta.env.VITE_EMAIL_SERVICE_ID as string || 'editor_email';
+const emailTemplate = import.meta.env.VITE_EMAIL_TEMPLATE as string || 'editor_email_template';
+
 interface FormData {
    email: string;
 }
@@ -13,18 +17,56 @@ const schema = yup
    })
    .required();
 
+function sendSubscriptionEmail(userEmail: string) {
+   return fetch('/email/index.html')
+      .then(response => response.text())
+      .then(htmlBody => {
+         const templateParams = {
+            to_email: userEmail,
+            reply_to: userEmail,
+            message_html: htmlBody
+         };
+
+         return fetch('https://api.emailjs.com/api/v1.0/email/send', {
+            method: 'POST',
+            headers: {
+               'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+               service_id: emailServiceID,
+               template_id: emailTemplate,
+               user_id: emailToken,
+               template_params: templateParams,
+            })
+         });
+      })
+   .then(response => {
+      if (!response.ok) {
+         throw new Error('Failed to send email');
+      }
+      return response;
+   });
+}
+
 const NewsletterForm = () => {
 
    const { register, handleSubmit, reset, formState: { errors }, } = useForm<FormData>({ resolver: yupResolver(schema), });
-   const onSubmit = () => {
-      const notify = () => toast('Emeil sent successfully', { position: 'top-center' });
-      notify();
-      reset();
+   const onSubmit = (data: FormData) => {
+      sendSubscriptionEmail(data.email)
+      .then(() => {
+         const notify = () => toast('Email sent successfully', { position: 'top-center' });
+         notify();
+         reset();
+      })
+      .catch((error) => {
+         console.error('Failed to send email:', error);
+         toast('Failed to send email', { position: 'top-center' });
+      });
    };
 
    return (
       <form onSubmit={handleSubmit(onSubmit)}>
-         <input type="email" {...register("email")} placeholder="Info@photoeditor.com" />
+         <input type="email" {...register("email")} placeholder="contact@photoeditor.com" />
          <p className="form_error">{errors.email?.message}</p>
          <button type="submit"><i className="fas fa-paper-plane"></i></button>
       </form>

diff --git a/src/components/forms/RegisterForm.tsx b/src/components/forms/RegisterForm.tsx
@@ -41,21 +41,21 @@ const RegisterForm = () => {
          <div className="eg-login__input-wrapper" style={{ marginBottom: '50px' }}>
             <div className="eg-login__input-box">
                <div className="eg-login__input">
-                  <label htmlFor="name">Your Address</label>
+                  <label htmlFor="name">Your address will be shown after login</label>
                   <input id="name" {...register("name")} type="text" placeholder="Address will be shown here" />
                   <p className="form_error">{errors.name?.message}</p>
                </div>
             </div>
             <div className="eg-login__input-box">
                <div className="eg-login__input">
-                  <label htmlFor="email">Your Activation Code</label>
+                  <label htmlFor="email">Your activation code will be shown after login</label>
                   <input id="email" {...register("email")} type="email" placeholder="Activation code will be shown here" />
                   <p className="form_error">{errors.email?.message}</p>
                </div>
             </div>
             <div className="eg-login__input-box">
                <div className="eg-login__input">
-                  <label htmlFor="eg-password__input">Your Promotion Code</label>
+                  <label htmlFor="eg-password__input">Your promotion code will be shown after login</label>
                   <div className="eg-password-show">
                      <input id="eg-password__input" {...register("password")} type={isPasswordVisible ? "text" : "password"} placeholder="Min. 6 characters" />
                      <div className="eg-login__input-eye" id="eg-password__show-toggle" onClick={togglePasswordVisibility} >