From bf33cc378aec8d56ffdf8ab7b0e9b5b605a4c39a Mon Sep 17 00:00:00 2001
From: phatnh4 <phatnh4@vng.com.vn>
Date: Mon, 6 May 2024 09:45:20 +0700
Subject: [PATCH] binding order note state

---
 src/pages/cart/delivery.tsx |  6 ++++++
 src/state.ts                | 27 ++++++++++++++++-----------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/pages/cart/delivery.tsx b/src/pages/cart/delivery.tsx
index e97e3ee..9c135bd 100644
--- a/src/pages/cart/delivery.tsx
+++ b/src/pages/cart/delivery.tsx
@@ -5,8 +5,12 @@ import { Box, Icon, Input, Text } from "zmp-ui";
 import { PersonPicker, RequestPersonPickerPhone } from "./person-picker";
 import { RequestStorePickerLocation, StorePicker } from "./store-picker";
 import { TimePicker } from "./time-picker";
+import { useRecoilState } from "recoil";
+import { orderNoteState } from "state";
 
 export const Delivery: FC = () => {
+  const [note, setNote] = useRecoilState(orderNoteState);
+
   return (
     <Box className="space-y-3 px-4">
       <Text.Header>Hình thức nhận hàng</Text.Header>
@@ -50,6 +54,8 @@ export const Delivery: FC = () => {
                   placeholder="Nhập ghi chú..."
                   className="border-none px-0 w-full focus:outline-none"
                   maxRows={4}
+                  value={note}
+                  onChange={(e) => setNote(e.currentTarget.value)}
                 />
               </Box>
             ),
diff --git a/src/state.ts b/src/state.ts
index ec1a67d..fc022ee 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -53,9 +53,9 @@ export const productsState = selector<Product[]>({
         ({
           ...product,
           variants: variants.filter((variant) =>
-            product.variantId.includes(variant.id),
+            product.variantId.includes(variant.id)
           ),
-        }) as Product,
+        } as Product)
     );
   },
 });
@@ -80,7 +80,7 @@ export const productsByCategoryState = selectorFamily<Product[], string>({
     ({ get }) => {
       const allProducts = get(productsState);
       return allProducts.filter((product) =>
-        product.categoryId.includes(categoryId),
+        product.categoryId.includes(categoryId)
       );
     },
 });
@@ -105,7 +105,7 @@ export const totalPriceState = selector({
     return cart.reduce(
       (total, item) =>
         total + item.quantity * calcFinalPrice(item.product, item.options),
-      0,
+      0
     );
   },
 });
@@ -144,7 +144,7 @@ export const resultState = selector<Product[]>({
     const products = get(productsState);
     await wait(500);
     return products.filter((product) =>
-      product.name.trim().toLowerCase().includes(keyword.trim().toLowerCase()),
+      product.name.trim().toLowerCase().includes(keyword.trim().toLowerCase())
     );
   },
 });
@@ -211,13 +211,13 @@ export const nearbyStoresState = selector({
           location.latitude,
           location.longitude,
           store.lat,
-          store.long,
+          store.long
         ),
       }));
 
       // Sort the stores by distance from the current location
       const nearbyStores = storesWithDistance.sort(
-        (a, b) => a.distance - b.distance,
+        (a, b) => a.distance - b.distance
       );
 
       return nearbyStores;
@@ -271,11 +271,11 @@ export const locationState = selector<
       if (token) {
         console.warn(
           "Sử dụng token này để truy xuất vị trí chính xác của người dùng",
-          token,
+          token
         );
         console.warn(
           "Chi tiết tham khảo: ",
-          "https://mini.zalo.me/blog/thong-bao-thay-doi-luong-truy-xuat-thong-tin-nguoi-dung-tren-zalo-mini-app",
+          "https://mini.zalo.me/blog/thong-bao-thay-doi-luong-truy-xuat-thong-tin-nguoi-dung-tren-zalo-mini-app"
         );
         console.warn("Giả lập vị trí mặc định: VNG Campus");
         return {
@@ -299,11 +299,11 @@ export const phoneState = selector<string | boolean>({
       }
       console.warn(
         "Sử dụng token này để truy xuất số điện thoại của người dùng",
-        token,
+        token
       );
       console.warn(
         "Chi tiết tham khảo: ",
-        "https://mini.zalo.me/blog/thong-bao-thay-doi-luong-truy-xuat-thong-tin-nguoi-dung-tren-zalo-mini-app",
+        "https://mini.zalo.me/blog/thong-bao-thay-doi-luong-truy-xuat-thong-tin-nguoi-dung-tren-zalo-mini-app"
       );
       console.warn("Giả lập số điện thoại mặc định: 0337076898");
       return "0337076898";
@@ -311,3 +311,8 @@ export const phoneState = selector<string | boolean>({
     return false;
   },
 });
+
+export const orderNoteState = atom({
+  key: "orderNote",
+  default: "",
+});