fix langding page scroll to Order

n-festa · Nov 7, 2023 · 22e848f · 22e848f
1 parent 5a0c16d
commit 22e848f
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 120 deletions.
diff --git a/components/LoginSteps/LoginComponent.tsx b/components/LoginSteps/LoginComponent.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import "react-phone-number-input/style.css";
 import PhoneInput from "react-phone-number-input";
 import { isPossiblePhoneNumber } from "react-phone-number-input";
+import { toast } from "react-toastify";
 
 type StepType = {
   onChange: any;
@@ -21,41 +22,40 @@ const LoginComponent = ({ onChange, setPhone }: StepType) => {
     console.log(phone);
     setPhone(phone);
     if (phone) {
-      if (phone.length == 12) {
-        phone = phone.substring(1);
-        await fetch(`${server}auth/requestOTP`, {
-          method: "post",
-          mode: "cors",
-          cache: "no-cache",
-          headers: {
-            Accept: "application/json",
-            "Content-Type": "application/json",
-          },
-          credentials: "include",
-          body: JSON.stringify({
-            phoneNumber: phone,
-          }),
-        })
-          .then((res) => res.json())
-          .then((json) => {
-            console.log(json);
-            if (json.status == "success") {
-              setTimeout(() => {
-                onChange(2);
-              }, 3000);
-            }
-          })
-          .catch((error) => {
-            console.log(error);
-          });
-      } else {
-        setError("Số điện thoại của bạn dường như chưa chính xác.");
-      }
-
-      /*
-            
-            */
+        if (phone.length == 12) {
+            phone = phone.substring(1);
+            await fetch(`${server}auth/requestOTP`, {
+              method: "post",
+              mode: "cors",
+              cache: "no-cache",
+              headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json",
+              },
+              credentials: "include",
+              body: JSON.stringify({
+                phoneNumber: phone,
+              }),
+            })
+            .then((res) => res.json())
+            .then((json) => {
+                console.log(json);
+                if (json.status == "success") {
+                  toast.success(" Success!", { autoClose: 1500 });
+                  setTimeout(() => {
+                    onChange(2);
+                  }, 3000);
+                }
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+        } else {
+            toast.error(" Fail!", { autoClose: 1500 });
+            setError("Số điện thoại của bạn dường như chưa chính xác.");
+        }
     } else {
+        toast.error(" Fail!", { autoClose: 1500 });
       setError("Vui lòng nhập số điện thoại của bạn");
     }
   };

diff --git a/components/header/index.tsx b/components/header/index.tsx
@@ -20,6 +20,7 @@ const Header = ({ isErrorPage }: HeaderType) => {
         }
     }
 
+
     useEffect(() => {
         if(!arrayPaths.includes(router.pathname) || isErrorPage) {
             return;
@@ -47,7 +48,7 @@ const Header = ({ isErrorPage }: HeaderType) => {
 
                         <div className="navigation d-flex gap-4 align-items-center">
                                 <div className="navigation-button">
-                                    <Link href="http://localhost:3001/#order-section">
+                                    <Link href="http://localhost:3001/#order-section1">
                                         <a className="text fw-bolder">Đặt hàng</a>
                                     </Link>
                                 </div>
@@ -57,7 +58,7 @@ const Header = ({ isErrorPage }: HeaderType) => {
                                     </Link>
                                 </div>
                                 <div className="navigation-button">
-                                    <Link href="http://localhost:3001/#download-section">
+                                    <Link href="http://localhost:3001/#download-section1">
                                         <a className="text fw-bolder">Tải App</a>
                                     </Link>
                                 </div>

diff --git a/components/page-intro/contact.tsx b/components/page-intro/contact.tsx
@@ -1,96 +1,96 @@
 const Contact = () => {
-  return (
-    <section
-      className="contact-us-section d-flex justify-content-center"
-      id="contact-section"
-    >
-      <div className="contact-us-container container">
-        <div className="contact-us-card p-5 gap-5">
-          <div className="d-flex flex-column gap-4">
-            <b className="heading">
-              Liên hệ để trở thành đối tác của 2ALL hôm nay
-            </b>
-            <div className="description">
-              Chúng tôi chào đón đối tác trên toàn quốc để cùng cung cấp hàng
-              triệu bữa ăn ngon và lành cho khách hàng Việt Nam.
-            </div>
-          </div>
-          <div className="form d-flex flex-column">
-            <div className="form-fields d-flex flex-column align-self-stretch gap-4">
-              <div className="input-with-label d-flex flex-column">
-                <div className="label d-flex">Email</div>
-                <input
-                  className="input d-flex"
-                  placeholder="Vui lòng nhập email của bạn"
-                />
+    return (
+        <section
+          className="contact-us-section d-flex justify-content-center"
+          id="contact-section"
+        >
+          <div className="contact-us-container container">
+            <div className="contact-us-card p-5 gap-5">
+              <div className="d-flex flex-column gap-4">
+                <b className="heading">
+                  Liên hệ để trở thành đối tác của 2ALL hôm nay
+                </b>
+                <div className="description">
+                  Chúng tôi chào đón đối tác trên toàn quốc để cùng cung cấp hàng
+                  triệu bữa ăn ngon và lành cho khách hàng Việt Nam.
+                </div>
               </div>
-              <div className="input-with-label d-flex flex-column">
-                <div className="label d-flex">Message</div>
-                <textarea
-                  className="textarea d-flex"
-                  placeholder="Ví dụ: xin chào 2ALL, tôi có nhu cầu muốn hợp tác với bạn"
-                ></textarea>
+              <div className="form d-flex flex-column">
+                <div className="form-fields d-flex flex-column align-self-stretch gap-4">
+                  <div className="input-with-label d-flex flex-column">
+                    <div className="label d-flex">Email</div>
+                    <input
+                      className="input d-flex"
+                      placeholder="Vui lòng nhập email của bạn"
+                    />
+                  </div>
+                  <div className="input-with-label d-flex flex-column">
+                    <div className="label d-flex">Message</div>
+                    <textarea
+                      className="textarea d-flex"
+                      placeholder="Ví dụ: xin chào 2ALL, tôi có nhu cầu muốn hợp tác với bạn"
+                    ></textarea>
+                  </div>
+                  <div className="recaptcha-wrapper d-flex align-items-center">
+                    <input type="checkbox" />
+                    <div className="flex-grow-1">Tôi không phải robot</div>
+                    <img
+                      className="recaptcha-image"
+                      alt=""
+                      src="/images/[email protected]"
+                    />
+                  </div>
+                </div>
+                <div className="actions">
+                  <div className="send-message-button">
+                    <b>Gửi tin nhắn</b>
+                  </div>
+                </div>
               </div>
-              <div className="recaptcha-wrapper d-flex align-items-center">
-                <input type="checkbox" />
-                <div className="flex-grow-1">Tôi không phải robot</div>
+            </div>
+
+            <div className="mixed-content d-flex justify-content-center align-items-center">
+              <img
+                className="cover-image"
+                alt=""
+                src="/images/6387eec683aaf-4a9394222d47f1b9b99be468ed6d0a66transformed-4@2x.png"
+              />
+
+              <div className="info-card first-card">
                 <img
-                  className="recaptcha-image"
+                  className="card-logo"
                   alt=""
-                  src="/images/image-10@2x.png"
+                  src="/images/image-36x36@2x.png"
                 />
+                <b className="card-text">Cải Kale</b>
               </div>
-            </div>
-            <div className="actions">
-              <div className="send-message-button">
-                <b>Gửi tin nhắn</b>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="mixed-content d-flex justify-content-center align-items-center">
-          <img
-            className="cover-image"
-            alt=""
-            src="/images/6387eec683aaf-4a9394222d47f1b9b99be468ed6d0a66transformed-4@2x.png"
-          />
 
-          <div className="info-card first-card">
-            <img
-              className="card-logo"
-              alt=""
-              src="/images/[email protected]"
-            />
-            <b className="card-text">Cải Kale</b>
-          </div>
-
-          <div className="info-card second-card">
-            <img
-              className="card-logo"
-              alt=""
-              src="/images/[email protected]"
-            />
-            <b className="card-text">Cà Chua</b>
-          </div>
+              <div className="info-card second-card">
+                <img
+                  className="card-logo"
+                  alt=""
+                  src="/images/[email protected]"
+                />
+                <b className="card-text">Cà Chua</b>
+              </div>
 
-          <div className="info-card third-card">
-            <img
-              className="card-logo"
-              alt=""
-              src="/images/6387ec276a4eb-62aa10dfb2adca268416cf2fd03d82f5transformed-31@2x.png"
-            />
+              <div className="info-card third-card">
+                <img
+                  className="card-logo"
+                  alt=""
+                  src="/images/6387ec276a4eb-62aa10dfb2adca268416cf2fd03d82f5transformed-31@2x.png"
+                />
 
-            <div className="d-flex flex-column position-relative">
-              <b className="card-text">Summer Avo Salad</b>
-              <div className="delivery">Đang giao hàng</div>
-              <div className="delivery-time">3:09 PM</div>
+                <div className="d-flex flex-column position-relative">
+                  <b className="card-text">Summer Avo Salad</b>
+                  <div className="delivery">Đang giao hàng</div>
+                  <div className="delivery-time">3:09 PM</div>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-    </section>
-  );
+        </section>
+    );
 };
 
 export default Contact;
diff --git a/components/page-intro/order-step.tsx b/components/page-intro/order-step.tsx
@@ -3,7 +3,7 @@
 
 const OrderStep = () => {
     return(
-         <section className="order-steps-section d-flex justify-content-center" id="order-section">
+        <section className="order-steps-section d-flex justify-content-center" id="order-section">
         <div className="order-steps-container container d-flex flex-column align-items-center">
             <b className="how-to-order">Cách đặt hàng</b>
             <div className="order-steps-wrapper">
@@ -84,7 +84,7 @@ const OrderStep = () => {
                 <div className="line-div"></div>
             </div>
         </div>
-    </section>
+        </section>
     )
 };
 

diff --git a/components/page-intro/today.tsx b/components/page-intro/today.tsx
@@ -32,6 +32,9 @@ const Today = () => {
                     ))}
                 </div>
             </div>
+
+            <div id="order-section1">
+            </div>
         </section>
     )
 };

diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "react-redux": "^7.2.1",
     "react-router-dom": "^6.17.0",
     "react-select": "^3.1.0",
+    "react-toastify": "^9.1.3",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-persist": "^6.0.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,7 +1,8 @@
 import React, { Fragment } from 'react';
 import Router from 'next/router';
 import {wrapper} from '../store';
-
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 // types
 import type { AppProps } from 'next/app';
@@ -25,6 +26,16 @@ if(isProduction) {
 
 const MyApp = ({ Component, pageProps }: AppProps) => (
   <Fragment>
+    <ToastContainer
+        position="top-right"
+        autoClose={8000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        draggable={false}
+        pauseOnVisibilityChange
+        closeOnClick
+        pauseOnHover
+      />
     <Component {...pageProps} />
   </Fragment>
 );

diff --git a/yarn.lock b/yarn.lock
@@ -496,6 +496,11 @@ [email protected], classnames@^2.2.1, classnames@^2.2.5, classnames@^2.2.6, classna
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -1208,6 +1213,13 @@ react-select@^3.1.0:
     react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
+react-toastify@^9.1.3:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.3.tgz#1e798d260d606f50e0fab5ee31daaae1d628c5ff"
+  integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==
+  dependencies:
+    clsx "^1.1.1"
+
 react-transition-group@^4.3.0, react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,6 +32,9 @@ const Today = () => { @@
                         ))}
                     </div>
                 </div>
+                <div id="order-section1">
+                </div>
             </section>
         )
     };
@@ Expand Down @@