CAFECA-IO · Luphia · May 4, 2023 · Mar 21, 2023 · Mar 23, 2023 · Mar 23, 2023
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "moment": "^2.29.4",
     "next": "13.1.6",
     "next-i18next": "^13.1.5",
+    "nodemailer": "^6.9.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "^12.1.5",

diff --git a/src/components/about/usecase_items.tsx b/src/components/about/usecase_items.tsx
@@ -16,13 +16,13 @@ function UseCaseItems({ title, description, image }: IUsecaseParams) {
 
   const useDescripList = useDescrip.map((v) => {
     return <p key={v}>{t(v)}</p>;
-  }); //todo: react use id
+  });
 
   return (
     <div className={myStyles.useitem_container}>
       <div className={myStyles.useitem_textbox}>
         <h3>{t(title)}</h3>
-        {useDescripList}
+        <p>{useDescripList}</p>
       </div>
       <div className={myStyles.useitem_imgbox}>
         <Image src={useImg} alt={title} layout="fill" objectFit="contain" />

diff --git a/src/components/common/contact_us_form.tsx b/src/components/common/contact_us_form.tsx
@@ -1,44 +1,201 @@
+import { useEffect, useState, useRef } from "react";
+import lottie from "lottie-web";
 import Image from "next/legacy/image";
 import { useTranslation } from "next-i18next";
+import useInputNumber from "../../lib/hooks/use_input_number";
 import myStyles from "@/styles/contact.module.css";
 
 function ContactUsForm() {
   const { t } = useTranslation("common");
 
+  const sendAnimContainer = useRef<HTMLDivElement>(null);
+  const successAnimContainer = useRef<HTMLDivElement>(null);
+
+  const [submitBtnDisabled, setSubmitBtnDisabled] = useState(false);
+  const [sendAnimation, setSendAnimation] = useState(false);
+  const [sendSuccess, setSendSuccess] = useState(false);
+  const [showResult, setShowResult] = useState(false);
+
+  const [inputName, setInputName] = useState("");
+  const [inputPhone, setInputPhone] = useInputNumber("");
+  const [inputEmail, setInputEmail] = useState("");
+  const [inputMessage, setInputMessage] = useState("");
+
+  const now = new Date().toLocaleString("zh-TW", { timeZone: "Asia/Taipei" });
+
+  useEffect(() => {
+    const animSend = lottie.loadAnimation({
+      container: sendAnimContainer.current!,
+      renderer: "svg",
+      loop: true,
+      autoplay: true,
+      path: "/animation/zonafans2.json",
+    });
+
+    const animSuccess = lottie.loadAnimation({
+      container: successAnimContainer.current!,
+      renderer: "svg",
+      loop: false,
+      autoplay: true,
+      path: "/animation/success.json",
+    });
+
+    return () => {
+      animSend.destroy();
+      animSuccess.destroy();
+    };
+  }, [sendAnimation, sendSuccess, showResult]);
+
+  const nameChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputName(event.target.value);
+  };
+
+  const phoneChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputPhone(event.target.value);
+  };
+
+  const emailChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputEmail(event.target.value);
+  };
+
+  const messageChangeHandler = (
+    event: React.ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    setInputMessage(event.target.value);
+  };
+
+  const submitHandler = async (event: React.FormEvent<HTMLFormElement>) => {
+    const failedProcess = async () => {
+      setSendSuccess(false);
+      setShowResult(true);
+      setSubmitBtnDisabled(false);
+
+      await new Promise((resolve) => setTimeout(resolve, 3000));
+
+      setSendAnimation(false);
+      setShowResult(false);
+    };
+    try {
+      event.preventDefault();
+
+      const emailData = {
+        comment: `<h3>姓名：${inputName}</h3><h3>手機：${inputPhone}</h3><h3>Email：${inputEmail}</h3><h3>意見：${inputMessage}</h3><p>${now}<p>`,
+      };
+
+      setSubmitBtnDisabled(true);
+      setSendAnimation(true);
+
+      await new Promise((resolve) => setTimeout(resolve, 3000));
+
+      const res = await fetch("/api/email", {
+        method: "POST",
+        body: JSON.stringify(emailData),
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+      });
+      const result = await res.json();
+
+      const success = result.success;
+      if (success) {
+        setSendSuccess(true);
+        setShowResult(true);
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        setSendAnimation(false);
+        setSendSuccess(false);
+        setShowResult(false);
+        setInputName("");
+        setInputPhone("");
+        setInputEmail("");
+        setInputMessage("");
+      } else {
+        await failedProcess();
+      }
+      setSubmitBtnDisabled(false);
+    } catch (error) {
+      await failedProcess();
+    }
+  };
+
+  const resultPart = showResult ? (
+    sendSuccess ? (
+      <div className={myStyles.send_result_container}>
+        <div className={myStyles.anim_send} ref={successAnimContainer}></div>
+        <p>{t("CONTACT_FORM.SUCCESS_MESSAGE")}</p>
+      </div>
+    ) : (
+      <div className={myStyles.send_result_container}>
+        <h1>{t("CONTACT_FORM.ERROR_MESSAGE1")}</h1>
+        <p>{t("CONTACT_FORM.ERROR_MESSAGE2")}</p>
+      </div>
+    )
+  ) : null;
+
+  const inputPart = sendAnimation ? (
+    <div className={myStyles.contact_animation_container}>
+      <div className={myStyles.anim_send} ref={sendAnimContainer}></div>
+    </div>
+  ) : (
+    <>
+      <input
+        id="name"
+        type="text"
+        placeholder={`${t("CONTACT_FORM.NAME")}`}
+        onChange={nameChangeHandler}
+        value={inputName || ""}
+        required
+      ></input>
+      <input
+        id="phone"
+        type="text"
+        placeholder={`${t("CONTACT_FORM.PHONE")}`}
+        value={inputPhone || ""}
+        onChange={phoneChangeHandler}
+        required
+      ></input>
+      <input
+        id="email"
+        type="text"
+        placeholder={`${t("CONTACT_FORM.EMAIL")}`}
+        value={inputEmail || ""}
+        onChange={emailChangeHandler}
+        required
+      ></input>
+      <textarea
+        id="message"
+        rows={7}
+        wrap="soft"
+        placeholder={`${t("CONTACT_FORM.MESSAGE")}`}
+        onChange={messageChangeHandler}
+        required
+      ></textarea>
+    </>
+  );
+
+  const submitButton = submitBtnDisabled ? (
+    <button disabled className={myStyles.btn_send}>
+      {t("CONTACT_FORM.SENDING")}
+    </button>
+  ) : (
+    <button id="submit" type="submit" className={myStyles.btn_submit}>
+      {t("CONTACT_FORM.SUBMIT_BUTTON")}
+    </button>
+  );
+
   return (
     <div className={myStyles.contact_container}>
       <div className={myStyles.contact_imgbox}>
         <Image alt="contact_us" src="/img/contact.svg" layout="fill" />
       </div>
-      <form className={myStyles.contact_formPart}>
-        <input
-          id="name"
-          type="text"
-          placeholder={`${t("CONTACT_FORM.NAME")}`}
-          required
-        ></input>
-        <input
-          id="phone"
-          type="text"
-          placeholder={`${t("CONTACT_FORM.PHONE")}`}
-          required
-        ></input>
-        <input
-          id="email"
-          type="text"
-          placeholder={`${t("CONTACT_FORM.EMAIL")}`}
-          required
-        ></input>
-        <textarea
-          id="message"
-          rows={7}
-          wrap="soft"
-          placeholder={`${t("CONTACT_FORM.MESSAGE")}`}
-          required
-        ></textarea>
-        <button id="submit" type="submit">
-          {t("CONTACT_FORM.SUBMIT_BUTTON")}
-        </button>
+
+      <form
+        onSubmit={submitHandler}
+        style={{ position: "relative" }}
+        className={myStyles.contact_formPart}
+      >
+        {resultPart}
+        {inputPart}
+        {submitButton}
       </form>
     </div>
   );

diff --git a/src/components/common/footer.tsx b/src/components/common/footer.tsx
@@ -33,7 +33,7 @@ function Footer() {
 
       <div className={myStyles.footer_link_item}>
         <h4>{t("NAV_BAR.TECHNOLOGY")}</h4>
-        <Link href="/technology#distributed-audit" scroll={false}>
+        <Link href="/technology#decentralized-audit" scroll={false}>
           <p>{t("TECHNOLOGY.TITLE1")}</p>
         </Link>
         <Link href="/technology#zero-knowledge-proof" scroll={false}>

diff --git a/src/components/faq/faqItems.tsx b/src/components/faq/faqItems.tsx
@@ -4,7 +4,7 @@ import myStyles from "@/styles/faq.module.css";
 interface IFaqItemsParams {
   id: string;
   question: string;
-  answer: string;
+  answer: string[];
   faqBlockStyles: string;
   answerAreaStyles: string;
   showAnsIndex: string;
@@ -30,15 +30,17 @@ function FAQItems({
     }
   };
 
+  const answerList = answer.map((v) => {
+    return <p key={String(v)}>{t(v)}</p>;
+  });
+
   return (
     <section
       className={`${myStyles.faq_block} ${faqBlockStyles}`}
       onClick={clickHandler}
     >
       <h4>{t(question)}</h4>
-      <div className={answerAreaStyles}>
-        <p>{t(answer)}</p>
-      </div>
+      <div className={answerAreaStyles}>{answerList}</div>
     </section>
   );
 }

diff --git a/src/components/home/bolt_introduction.tsx b/src/components/home/bolt_introduction.tsx
@@ -2,6 +2,7 @@ import { useRef, useEffect } from "react";
 import lottie from "lottie-web";
 import { useTranslation } from "next-i18next";
 import myStyles from "@/styles/introduction.module.css";
+import Link from "next/link";
 
 function BoltIntro() {
   const { t } = useTranslation("common");
@@ -57,8 +58,6 @@ function BoltIntro() {
       path: "/animation/step03.json",
     });
 
-    //const [animFrameStep1,setAnimFrameStep1] = useState<number>()
-
     function animatebodymovin(duration: number) {
       const scrollPosition = window.scrollY;
 
@@ -120,7 +119,11 @@ function BoltIntro() {
         <div className={myStyles.animSteps} ref={lottieStep1}></div>
         <div className={myStyles.bolt_intro_textbox}>
           <h2>
-            <span>{t("MAIN.BLOCK2.TITLE1_HIGHLIGHT")}</span>
+            <span>
+              <Link href="/technology#zero-knowledge-proof">
+                {t("MAIN.BLOCK2.TITLE1_HIGHLIGHT")}
+              </Link>
+            </span>
             {t("MAIN.BLOCK2.TITLE1")}
           </h2>
           <p>{t("MAIN.BLOCK2.DESCRIPTION1")}</p>
@@ -132,7 +135,11 @@ function BoltIntro() {
         <div className={myStyles.bolt_intro_textbox}>
           <h2>
             {t("MAIN.BLOCK2.TITLE2")}
-            <span>{t("MAIN.BLOCK2.TITLE2_HIGHLIGHT")}</span>
+            <span>
+              <Link href="/technology#decentralized-audit">
+                {t("MAIN.BLOCK2.TITLE2_HIGHLIGHT")}
+              </Link>
+            </span>
           </h2>
           <p>{t("MAIN.BLOCK2.DESCRIPTION2_LINE1")}</p>
           <p>{t("MAIN.BLOCK2.DESCRIPTION2_LINE2")}</p>
@@ -145,7 +152,11 @@ function BoltIntro() {
         <div className={myStyles.bolt_intro_textbox}>
           <h2>
             {t("MAIN.BLOCK2.TITLE3")}
-            <span>{t("MAIN.BLOCK2.TITLE3_HIGHLIGHT")}</span>
+            <span>
+              <Link href="/technology#hybrid-chain-evidence">
+                {t("MAIN.BLOCK2.TITLE3_HIGHLIGHT")}
+              </Link>
+            </span>
           </h2>
           <p>{t("MAIN.BLOCK2.DESCRIPTION3")}</p>
         </div>