update 31.10

assets/css/style.css

@@ -1686,7 +1686,7 @@ a:hover{
     justify-content: center;
     z-index: 8;
 }
-.button56, .button57 {
+.button56 {
     border-radius: var(--br-5xl);
     box-shadow: var(--shadow-xs);
     box-sizing: border-box;
@@ -1709,7 +1709,7 @@ a:hover{
     justify-content: center;
 }
 
-.button57 {
+.button56.active {
     background-color: var(--primary-500);
     border: 1px solid var(--primary-500);
     z-index: 7;

components/BMI/index.tsx

@@ -26,12 +26,6 @@ const BMI = ({height, weight} : BMIType) => {
         result_bmi = "Béo phì độ 3";
     }
 
-
-
-
-
-    console.log(result_bmi);
-
     return (
         <div className="ch-s-bmi-parent">
             <div className="ch-s-bmi font-size24">Chỉ số BMI</div>

components/header/checkLogin.tsx

@@ -12,9 +12,7 @@ const CheckLogin =() =>{
     const user = loadState("userLogIn");
 
     if(user){
-        console.log(user);
         return(
-
             <div className="navbar-navt">
                     <a className="nav-link dropdown-toggle mr-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                         <i className="icon-avatar"></i>

components/item/index.tsx

@@ -4,10 +4,10 @@ import Ingredient from './ingredient';
 
 
 const MenuItem = ({   name,  price,
-                 images, merchart, currentPrice,
-                 cook_method,  time ,
-                    ingredient,
-                 distance, ratings, kcal}: ProductTypeList) => {
+                images, merchart, currentPrice,
+                cook_method,  time ,
+                ingredient,
+                distance, ratings, kcal}: ProductTypeList) => {
     return(
         <div className="food-card d-flex flex-column ">
             <div className="frame-parent d-flex flex-column">

components/page-intro/today.tsx

@@ -7,7 +7,6 @@ import { ProductTypeList } from 'types';
 const Today = () => {
     const { data } = useSwr('/api/products', fetcher);
 
-    console.log(data);
     if (!data) return <div>Loading</div>;
 
     return(

components/steps/LoginComponent.tsx

@@ -1,5 +1,6 @@
 import { useForm } from "react-hook-form";
-
+import {postData } from '../../utils/services'; 
+import { server } from '../../utils/server'; 
 interface LoginPhone {
   phone: string;
 }
@@ -16,8 +17,21 @@ const LoginComponent = ({onChange,setPhone}: StepType) => {
     const onSubmit = async (data: LoginPhone) => {
         var phone_with_area_code = "84" + data.phone ;
         console.log("data :" + phone_with_area_code );
+
         setPhone(phone_with_area_code);
-        onChange(2);
+
+        const res = await postData(`${server}auth/requestOTP`, {
+            phoneNumber: phone_with_area_code,
+        });
+
+
+
+        if(res.status == "success"){
+            setTimeout(() => {
+                onChange(2);
+            }, 2000000);
+        }
+      //  onChange(2);
     };
 
     return (

components/steps/PhoneVerificationComponent.tsx

@@ -1,14 +1,15 @@
 //import { useForm } from "react-hook-form";
 import TimerContainer   from '../time/TimerContainer';
 import { useState,useEffect,createRef } from "react";
+import { postData } from '../../utils/services'; 
+import { server } from '../../utils/server'; 
 
 type StepType = {
     onChange : any,
     phone: string
 }
 
 const PhoneVerificationComponent = ({phone,onChange}: StepType) => {
-
     // show 6 input
     const numberOfInputs =  6;
     const [inputRefsArray] = useState(() =>
@@ -59,18 +60,18 @@ const PhoneVerificationComponent = ({phone,onChange}: StepType) => {
     const authenticateOTP= async(phoneNumber:string,inputOTP: string)  =>{
         console.log("phoneNumber: " + phoneNumber);
         console.log("inputOTP:" + inputOTP);
-        /*
         const res = await postData(`${server}auth/authenticateOTP`, {
             phoneNumber: phoneNumber,
             inputOTP:inputOTP
         });
 
-        if(res.status === "success"){
-            router.push( '/additional-sign-up-info');
+        console.log(res);
+        if(res.status == "success"){
+            setTimeout(() => {
+                onChange(3);
+            }, 2000);
         }
-        */
-
-        onChange(3);
+       // onChange(3);
     }
 
 
@@ -93,7 +94,7 @@ const PhoneVerificationComponent = ({phone,onChange}: StepType) => {
                             <div className="input7" id={`${currentIndex}`}>
                                 {inputRefsArray.map((ref: any, currentIndex) => {
                                     return (
-                                        <div className="mega-input-field-base1">
+                                        <div className="mega-input-field-base1" key={currentIndex} >
                                             <input className="text68 border-none text-center" 
                                             name="phone-value"
                                             key={currentIndex} 

components/steps/RegistrationSuccess.tsx

@@ -4,10 +4,10 @@ import BMI from "../BMI"
 type StepType = {
     height: any,
     weight: any,
+    kcal:any,
 }
 
-const RegistrationSuccess = ({height,weight}: StepType) => {
-    console.log(height);
+const RegistrationSuccess = ({height,weight,kcal}: StepType) => {
     return (
         <div className="otp sign-up">
             <div className="content26">
@@ -26,7 +26,7 @@ const RegistrationSuccess = ({height,weight}: StepType) => {
                         <div className="data-parent">
                             <div className="data position-relative">
                                 <div className="data-child"></div>
-                                <div className="div6">2350</div>
+                                <div className="div6">{kcal}</div>
                             </div>
                             <div className="cn-i">Kcal/ ngày</div>
                         </div>

next.config.js

@@ -4,4 +4,12 @@ module.exports = {
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles')],
   },
-}
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'https://api.example.com/:path*',
+      },
+    ]
+  },
+}

package.json

@@ -19,6 +19,7 @@
     "@reduxjs/toolkit": "^1.8.1",
     "axios": "^1.5.1",
     "lodash": "^4.17.21",
+    "moment": "^2.29.4",
     "next": "^12.1.0",
     "next-cloudinary": "^4.27.0",
     "next-redux-wrapper": "^6.0.2",

pages/_document.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react'
-import Document, { Head, Main, NextScript, DocumentInitialProps, DocumentContext } from 'next/document'
+import Document, { Html,Head, Main, NextScript, DocumentInitialProps, DocumentContext } from 'next/document'
 import { GA_TRACKING_ID } from '../utils/gtag';
 
 interface DocumentProps extends DocumentInitialProps {
@@ -23,7 +23,7 @@ export default class CustomDocument extends Document<DocumentProps> {
     const { isProduction } = this.props
 
     return (
-      <html lang="en">
+      <Html lang="en">
         <Head>
 
           {/* We only want to add the scripts if in production */}
@@ -54,7 +54,7 @@ export default class CustomDocument extends Document<DocumentProps> {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     )
   }
 }

pages/api/products.ts

@@ -5,8 +5,6 @@ import products from '../../utils/data/products';
 
 export default (req: NextApiRequest, res: NextApiResponse) => {
   console.log(req);
-
-  // fake loading time
   setTimeout(() => {
     res.status(200).json(products);
   }, 800);

pages/login/index.tsx

@@ -12,17 +12,16 @@ function ActiveStepFormComponent() {
     const [phone,setPhone] = useState<string>("");
     const [height,setHeight] = useState<number>(0);
     const [weight,setWeight] = useState<number>(0);
+    const [kcal,setKcal] = useState<number>(0);
     switch (step) {
         case 1:
             return <LoginComponent onChange={setStep} setPhone={setPhone}/>;
         case 2:
             return <PhoneVerificationComponent phone={phone} onChange={setStep}/>;
         case 3:
-            return <Additional onChange={setStep} setHeight={setHeight} setWeight={setWeight} />;;
+            return <Additional onChange={setStep} setHeight={setHeight} setWeight={setWeight} setKcal={setKcal}/>;;
         case 4:
-            return <RegistrationSuccess height={height} weight={weight}/>; 
-
-
+            return <RegistrationSuccess height={height} weight={weight} kcal={kcal}/>; 
         default:
           return null;
     }