add

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@ant-design/charts": "^1.3.5",
         "@craco/craco": "^6.4.3",
+        "@emailjs/browser": "^3.4.0",
         "@line/liff": "^2.17.0",
         "@testing-library/jest-dom": "^5.11.4",
         "@testing-library/react": "^11.1.0",
@@ -3164,6 +3165,14 @@
         "lodash": "^4.11.1"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-3.4.0.tgz",
+      "integrity": "sha512-pTR9wEj0KLrJBVWFfB6IFEwmGIod/6cfN541Y0TVN2+9Bbn+R9a8gq6GeJZ6ggbYs36J3gCTXDyVKhtxjRsjtw==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -31875,6 +31884,11 @@
         "lodash": "^4.11.1"
       }
     },
+    "@emailjs/browser": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-3.4.0.tgz",
+      "integrity": "sha512-pTR9wEj0KLrJBVWFfB6IFEwmGIod/6cfN541Y0TVN2+9Bbn+R9a8gq6GeJZ6ggbYs36J3gCTXDyVKhtxjRsjtw=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@ant-design/charts": "^1.3.5",
     "@craco/craco": "^6.4.3",
+    "@emailjs/browser": "^3.4.0",
     "@line/liff": "^2.17.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/router/Routers.jsx

@@ -17,7 +17,7 @@ import FullLayout from "../Layouts/FullLayout";
 
 // Components
 
-import ProtectedRoute from "../ProtectdRoute";
+import   from "../ProtectdRoute";
 
 export default function Routers() {
 

src/view/Admin/ApproveSetting/DetailApprove.jsx

-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
+import emailjs from "@emailjs/browser";
 
 import { useLocation } from "react-router-dom";
 
@@ -12,8 +13,7 @@ import {
   Marker,
 } from "react-google-maps";
 
-import {  ApproveGarage } from "../../../services";
-
+import { ApproveGarage } from "../../../services";
 
 import IconCar from "../../../assets/icons/car.png";
 
@@ -22,6 +22,8 @@ function DetailApprove() {
   const [visible2, setVisible2] = useState(false);
   const [confirmLoading, setConfirmLoading] = useState(false);
 
+  const form = useRef();
+
   let location = useLocation;
   const data = location().state.data;
 
@@ -50,22 +52,25 @@ function DetailApprove() {
 
   const showModal = () => {
     setVisible2(true);
-    
   };
   //   console.log("data", data);
 
   const handleOk = (id) => {
     let data = {
-        garageID: id
-    }
-    ApproveGarage(data)
+      garageID: id,
+    };
+
+    sendEmail();
+    // console.log('email', sendEmail())
+
+    ApproveGarage(data);
     // console.log("id", id);
     setConfirmLoading(true);
     setTimeout(() => {
       setVisible2(false);
       setConfirmLoading(false);
 
-      window.location.reload(false)
+      window.location.reload(false);
     }, 2000);
   };
 
@@ -74,9 +79,48 @@ function DetailApprove() {
     setVisible2(false);
   };
 
+  const sendEmail = () => {
+    // e.preventDefault();
+
+    emailjs
+      .sendForm(
+        "service_fvdfink",
+        "template_f4fea9i",
+        form.current,
+        "RxwNfn5jn6WDcuzBK"
+      )
+      // console.log(form.current)
+      .then(
+        (result) => {
+          console.log(result.text);
+        },
+        (error) => {
+          console.log(error.text);
+        }
+      );
+  };
+
+  console.log("data => ", data);
+
+  // function FormEmail() {
+  //   return (
+  //     <>
+  //       <form ref={form} onSubmit={sendEmail}>
+  //         <label>Name</label>
+  //         <input value="chaiwat 555" type="text" name="user_name" />
+  //         <label>Email</label>
+  //         <input type="email" name="user_email" />
+  //         <label>Message</label>
+  //         <textarea name="message" />
+  //         <input type="submit" value="Send" />
+  //       </form>
+  //     </>
+  //   );
+  // }
+
   return (
     <>
-      <Row className="div-p-5">
+      <Row className="div-p-5" ref={form}>
         <Col span={24} className="pageHeader" style={{ padding: "2%" }}>
           <PageHeader
             className="site-page-header"
@@ -118,10 +162,7 @@ function DetailApprove() {
               </Col>
             </Row>
             <Col style={{ padding: "3% 0 0 0" }} span={24}>
-              <Button
-                className="bt-them"
-                onClick={showModal}
-              >
+              <Button className="bt-them" onClick={showModal}>
                 อนุมัติ
               </Button>
             </Col>
@@ -154,8 +195,23 @@ function DetailApprove() {
         confirmLoading={confirmLoading}
         onCancel={handleCancel}
       >
-        <p>ยืนยันที่จะให้ร้าน {data.garage_name} เข้าร่วมกับระบบจัดการร้านซ่อม</p>
+        <p>
+          ยืนยันที่จะให้ร้าน {data.garage_name} เข้าร่วมกับระบบจัดการร้านซ่อม
+        </p>
       </Modal>
+
+      {/* Send Email To Email Garage */}
+      <div>
+        <form hidden ref={form} onSubmit={sendEmail}>
+          <input value={data.user_name} type="text" name="user_name" />
+          <input value={data.garage_name} type="text" name="garage_name" />
+          <input value={data.registration_date} type="text" name="regis_date" />
+          <input value={data.email} type="email" name="user_email" />
+          <label>Message</label>
+          <textarea name="message" />
+          <input type="submit" value="Send" />
+        </form>
+      </div>
     </>
   );
 }

src/view/Dashboards/component/ContentSearch.jsx

 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 
-import { Col, Row, Card, Typography } from "antd";
+import { Col, Row, Card, Typography, Avatar, Image } from "antd";
 
 // import Service
 import { FetchDetailByMember } from "../../../services";
 
+import IconGarage from '../../../assets/icons/garage.png'
+
 const { Text } = Typography;
 
 export default function ContentSearch(props) {
@@ -31,7 +33,7 @@ export default function ContentSearch(props) {
     getDetailByMember();
   }, [tel]);
 
-//   console.log("datas", datas, "tel", tel);
+  console.log("datas", datas, "tel", tel);
 
   return (
     <>
@@ -48,7 +50,9 @@ export default function ContentSearch(props) {
                 >
                   <Card
                     type="inner"
-                    title={val.garage_name + " " + val.repair_date}
+                    title={<> <Avatar
+                      src={<Image src={IconGarage} style={{ width: 32 }} />}
+                    /> {val.garage_name}    {val.repair_date}</>}
                     extra={
                       <Link
                         to={{

src/view/Dashboards/member/ShowDetailMember.jsx

 import React, { useEffect, useState } from "react";
 
-import { Col, Row, Typography, Table, Divider } from "antd";
+import { Col, Row, Typography, Table, Divider, Avatar, Image } from "antd";
 import { MobileOutlined } from "@ant-design/icons";
 
 import { useLocation } from "react-router-dom";
@@ -110,6 +110,10 @@ export default function App() {
 
           <Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
             <Text className="color-bfbf">ลูกค้า</Text>
+            <br /> <br />
+            <Avatar
+              src={<Image src={datas.imageUrl} style={{ width: 32 }} />}
+            />
             <Title level={4} className="color-fff">
               <Text className="color-fff">คุณ {datas.member_name}</Text>
             </Title>

src/view/Registion/Registion.jsx

@@ -46,7 +46,6 @@ const MapWithAMarker = withScriptjs(
 const { Option } = Select;
 const { Title } = Typography;
 
-
 //Main Function
 export default function RegistrationForm() {
   const [ontime, setOnTime] = useState();
@@ -83,7 +82,7 @@ export default function RegistrationForm() {
         if (response.code === 200) {
           Modal.info({
             title: "เรียบร้อยแล้ว",
-            content: `สมัครสมาชิกให้ลูกค้าเรียบร้อยแล้ว`,
+            content: `ได้รับข้อมูลของร้านท่านแล้ว ระบบจะทำการตรวจสอบข้อมูลของร้านและยืนการเข้าร่วมกับระบบ โดยจะแจ้งไปยังอีเมลล์ของท่านที่ได้ลงทะเบียนไว้`,
             onOk: () => {
               window.location.reload(false);
             },
@@ -558,7 +557,7 @@ export default function RegistrationForm() {
               </Row>
             </div>
             <Col span={24}>
-              <Form.Item >
+              <Form.Item>
                 <Button
                   className="bt-them"
                   htmlType="submit"
@@ -572,6 +571,5 @@ export default function RegistrationForm() {
         </Col>
       </Row>
     </>
-   
   );
 }

yarn.lock

@@ -2393,6 +2393,11 @@
   dependencies:
     "lodash" "^4.11.1"
 
+"@emailjs/browser@^3.4.0":
+  "integrity" "sha512-pTR9wEj0KLrJBVWFfB6IFEwmGIod/6cfN541Y0TVN2+9Bbn+R9a8gq6GeJZ6ggbYs36J3gCTXDyVKhtxjRsjtw=="
+  "resolved" "https://registry.npmjs.org/@emailjs/browser/-/browser-3.4.0.tgz"
+  "version" "3.4.0"
+
 "@eslint/eslintrc@^0.4.3":
   "integrity" "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw=="
   "resolved" "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz"