Repository: kralion/trackify
Pull request #7: reordered
Author: login: kralion
Created: 2025-04-26T23:56:06Z | Merged: 2025-04-26T23:58:11Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added the ability to include additional notes when customizing burgers.
  - Introduced temperature selection (Helada or Regular) when customizing drinks.

- **Improvements**
  - Updated burger customization options: replaced "BBQ" sauce with "Tártara" and "Ají", and updated sides to "Fritas" and "Al hilo" under "Papas".
  - Drink brand options now dynamically adjust based on the selected product.
  - Category names are now centered for improved readability.
  - Categories are now displayed in a custom order for better navigation.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/app/index.tsx b/app/index.tsx
index 9a02511..b53b2a7 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -12,7 +12,6 @@ export default function HomeScreen() {
   const { products, getProductsByCategoryOrSearch, loading: loadingProducts } = useProductStore();
   const { categories, getCategories, loading: loadingCategories } = useCategoryStore();
   const [refreshing, setRefreshing] = useState(false);
-  const { isDarkColorScheme } = useColorScheme();
   const [activeCategory, setActiveCategory] = useState<number | null>(1);
   const width = useWindowDimensions().width;
   const isMobile = width < 768;
diff --git a/components/BurgerCustomizationModal.tsx b/components/BurgerCustomizationModal.tsx
index aadf452..c7dffb6 100644
--- a/components/BurgerCustomizationModal.tsx
+++ b/components/BurgerCustomizationModal.tsx
@@ -6,17 +6,19 @@ import { Text } from "./ui/text";
 import { Product } from "@/types";
 import { useCartStore } from "@/store";
 import { toast } from "sonner-native";
+import { Input } from "./ui/input";
 
 // Opciones fijas, puedes moverlas a un archivo de constantes luego
 const SAUCES = [
   { id: "mayonesa", name: "Mayonesa" },
   { id: "ketchup", name: "Ketchup" },
   { id: "mostaza", name: "Mostaza" },
-  { id: "bbq", name: "BBQ" },
+  { id: "tartara", name: "Tártara" },
+  { id: "aji", name: "Ají" }
 ];
-const SIDES = [
-  { id: "sin_ensalada", name: "Sin ensalada" },
-  { id: "sin_papas", name: "Sin papas" },
+const FRIES = [
+  { id: "fritas", name: "Fritas" },
+  { id: "al_hilo", name: "Al hilo" },
 ];
 
 
@@ -30,6 +32,7 @@ export const BurgerCustomizationModal = ({ show, onClose, product }: BurgerCusto
   const { addItem } = useCartStore();
   const [selectedSauces, setSelectedSauces] = useState<string[]>([]);
   const [selectedSides, setSelectedSides] = useState<string[]>([]);
+  const [notes, setNotes] = useState<string>("");
   const [selectedExtras, setSelectedExtras] = useState<string[]>([]);
 
   // Limpia los estados al cerrar el modal
@@ -92,22 +95,33 @@ export const BurgerCustomizationModal = ({ show, onClose, product }: BurgerCusto
             ))}
           </View>
           {/* Papas */}
-          <Text className="font-semibold mt-4">Extras</Text>
+          <Text className="font-semibold mt-4">Papas</Text>
           <View className="flex-row gap-2">
-            {SIDES.map(side => (
+            {FRIES.map(fry => (
               <Button
-                key={side.id}
-                variant={selectedSides.includes(side.id) ? "default" : "outline"}
+                key={fry.id}
+                variant={selectedSides.includes(fry.id) ? "default" : "outline"}
                 size="sm"
                 className="rounded-full"
-                onPress={() => handleToggle(selectedSides, setSelectedSides, side.id)}
-                accessibilityLabel={`Seleccionar ${side.name}`}
+                onPress={() => handleToggle(selectedSides, setSelectedSides, fry.id)}
+                accessibilityLabel={`Seleccionar ${fry.name}`}
               >
-                <Text>{side.name}</Text>
+                <Text>{fry.name}</Text>
               </Button>
             ))}
           </View>
-
+          <View className="mt-2">
+            <Text className="font-semibold mb-1">Notas</Text>
+            <Input
+              multiline
+              numberOfLines={3}
+              value={notes}
+              onChangeText={(text) => setNotes(text)}
+              placeholder="Ej: Con poca sal, poco arroz, etc."
+              className="w-full min-h-[60px] text-sm bg-zinc-100 dark:bg-zinc-800 rounded-xl px-3 py-2"
+              accessibilityLabel="Notas para el producto"
+            />
+          </View>
 
         </View>
         <DialogFooter>
diff --git a/components/CategoryItem.tsx b/components/CategoryItem.tsx
index c559ccb..7c26ff1 100644
--- a/components/CategoryItem.tsx
+++ b/components/CategoryItem.tsx
@@ -18,7 +18,7 @@ export const CategoryItem = ({
 
       <Image source={{ uri: category.icon }} style={{ width: 40, height: 40 }} />
     </View>
-    <Text className={`text-sm ${active ? ' text-black' : 'text-white'}`} >
+    <Text className={`text-sm text-center ${active ? ' text-black' : 'text-white'}`} >
       {category.name}
     </Text>
   </TouchableOpacity>
diff --git a/components/DrinkCustomizationModal.tsx b/components/DrinkCustomizationModal.tsx
index 7e6157c..3ceee9b 100644
--- a/components/DrinkCustomizationModal.tsx
+++ b/components/DrinkCustomizationModal.tsx
@@ -7,12 +7,36 @@ import { Text } from "./ui/text";
 import { Product } from "@/types";
 import { useCartStore } from "@/store";
 
-const BRANDS = [
-  { id: "coca_cola", name: "CocaCola", price: 15 },
-  { id: "fanta", name: "Fanta", price: 13 },
-  { id: "pepsi", name: "Pepsi", price: 12 },
+
+
+const BRANDHALFLITER = [
+  { id: "coca_cola", name: "Coca Cola", price: 4 },
+  { id: "inca_kola", name: "Inca Kola", price: 4 },
+  { id: "sprite", name: "Sprite", price: 3 },
+  { id: "fanta", name: "Fanta", price: 3 }
+];
+const BRANDLITERANDHALF = [
+  { id: "coca_cola", name: "Coca Cola", price: 10 },
+  { id: "inca_kola", name: "Inca Kola", price: 10 },
+];
+
+const BRANDS2LITERS = [
+  { id: "coca_cola", name: "Coca Cola", price: 12 },
+  { id: "inca_kola", name: "Inca Kola", price: 12 },
 ];
 
+const TEMPERATURE = [
+  { id: "helada", name: "Helada" },
+  { id: "regular", name: "Regular" },
+];
+
+const getBrandsByProductId = (id: number) => {
+  if (id === 75) return BRANDHALFLITER;
+  if (id === 73) return BRANDLITERANDHALF;
+  if (id === 72) return BRANDS2LITERS;
+  return [];
+};
+
 interface DrinkCustomizationModalProps {
   show: boolean;
   onClose: () => void;
@@ -22,6 +46,9 @@ interface DrinkCustomizationModalProps {
 export const DrinkCustomizationModal = ({ show, onClose, product }: DrinkCustomizationModalProps) => {
   const { addItem } = useCartStore();
   const [selectedBrand, setSelectedBrand] = useState<string | null>(null);
+  const [selectedTemperature, setSelectedTemperature] = useState<string | null>(null);
+
+  const brands = getBrandsByProductId(product.id);
 
   useEffect(() => {
     if (!show) {
@@ -31,7 +58,7 @@ export const DrinkCustomizationModal = ({ show, onClose, product }: DrinkCustomi
 
   const handleAddToCart = () => {
     if (!selectedBrand) return;
-    const brandObj = BRANDS.find(b => b.id === selectedBrand);
+    const brandObj = brands.find(b => b.id === selectedBrand);
     const added = addItem({
       ...product,
       quantity: 1,
@@ -67,7 +94,7 @@ export const DrinkCustomizationModal = ({ show, onClose, product }: DrinkCustomi
         <View className="gap-4">
           <Text className="font-semibold mt-2">Marca</Text>
           <View className="flex-row flex-wrap gap-2">
-            {BRANDS.map(brand => (
+            {brands.map(brand => (
               <Button
                 key={brand.id}
                 variant={selectedBrand === brand.id ? "default" : "outline"}
@@ -81,6 +108,23 @@ export const DrinkCustomizationModal = ({ show, onClose, product }: DrinkCustomi
             ))}
           </View>
         </View>
+        <View className="gap-4">
+          <Text className="font-semibold mt-2">Temperatura</Text>
+          <View className="flex-row flex-wrap gap-2">
+            {TEMPERATURE.map(temp => (
+              <Button
+                key={temp.id}
+                variant={selectedTemperature === temp.id ? "default" : "outline"}
+                size="sm"
+                className="rounded-full"
+                onPress={() => setSelectedTemperature(temp.id)}
+                accessibilityLabel={`Seleccionar ${temp.name}`}
+              >
+                <Text>{temp.name}</Text>
+              </Button>
+            ))}
+          </View>
+        </View>
         <DialogFooter>
           <Button onPress={handleAddToCart} size="lg" className="w-full" disabled={!selectedBrand}>
             <Text className="font-semibold">Agregar al carrito</Text>
diff --git a/components/ProductCard.tsx b/components/ProductCard.tsx
index 5eea132..7372b56 100644
--- a/components/ProductCard.tsx
+++ b/components/ProductCard.tsx
@@ -118,7 +118,7 @@ function ProductAddedModal({ show, onClose, product }: { show: boolean; onClose:
             multiline
             numberOfLines={3}
             value={notes}
-            onChangeText={setNotes}
+            onChangeText={(text) => setNotes(text)}
             placeholder="Ej: Con poca sal, poco arroz, etc."
             className="w-full min-h-[60px] text-sm bg-zinc-100 dark:bg-zinc-800 rounded-xl px-3 py-2"
             accessibilityLabel="Notas para el producto"
diff --git a/store/category.ts b/store/category.ts
index 68dca2d..da0a199 100644
--- a/store/category.ts
+++ b/store/category.ts
@@ -16,7 +16,7 @@ export const useCategoryStore = create<CategoryStore>((set) => ({
     set(() => ({
       loading: true,
     }));
-      const { data, error } = await supabase.from('categories').select('*').order('id', { ascending: true });
+      const { data, error } = await supabase.from('categories').select('*').order('order', { ascending: true });
     if (error) throw error;
     set(() => ({
       categories: data,


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 3**

<details>
<summary>🔭 Outside diff range comments (3)</summary><blockquote>

<details>
<summary>components/DrinkCustomizationModal.tsx (3)</summary><blockquote>

`53-57`: _⚠️ Potential issue_

**Reset temperature selection when modal closes.**

The useEffect hook resets the selectedBrand when the modal closes, but doesn't reset the selectedTemperature. Update it to reset both states.

```diff
useEffect(() => {
  if (!show) {
    setSelectedBrand(null);
+   setSelectedTemperature(null);
  }
}, [show]);
```

---

`59-81`: _⚠️ Potential issue_

**Include temperature selection in cart customizations.**

The temperature selection isn't being included in the cart item customizations. Update the handleAddToCart function to include the selected temperature.

```diff
const handleAddToCart = () => {
-  if (!selectedBrand) return;
+  if (!selectedBrand || !selectedTemperature) return;
  const brandObj = brands.find(b => b.id === selectedBrand);
  const added = addItem({
    ...product,
    quantity: 1,
    customizations: {
      brand: brandObj ? brandObj.name : "",
+     temperature: TEMPERATURE.find(t => t.id === selectedTemperature)?.name || "",
    },
    price: brandObj ? brandObj.price : product.price,
  });
  setSelectedBrand(null);
+ setSelectedTemperature(null);
  onClose();
  // ...
```

---

`96-109`: _🛠️ Refactor suggestion_

**Handle empty brands array gracefully.**

If `getBrandsByProductId` returns an empty array, the UI will show no brand options. Add proper validation and user feedback for this scenario.

```diff
<View className="flex-row flex-wrap gap-2">
+ {brands.length === 0 ? (
+   <Text className="text-destructive">No hay marcas disponibles para este producto</Text>
+ ) : (
    {brands.map(brand => (
      <Button
        key={brand.id}
        variant={selectedBrand === brand.id ? "default" : "outline"}
        size="sm"
        className="rounded-full"
        onPress={() => setSelectedBrand(brand.id)}
        accessibilityLabel={`Seleccionar ${brand.name}`}
      >
        <Text>{brand.name} - S/.{brand.price.toFixed(2)}</Text>
      </Button>
    ))}
+ )}
</View>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (3)</summary><blockquote>

<details>
<summary>components/BurgerCustomizationModal.tsx (1)</summary><blockquote>

`39-44`: **Update useEffect cleanup to reset notes state.**

The useEffect cleanup doesn't reset the new notes state when closing the modal.


Update the useEffect to also reset the notes state:

```diff
useEffect(() => {
  if (!show) {
    setSelectedSauces([]);
    setSelectedSides([]);
+   setNotes("");
  }
}, [show]);
```

</blockquote></details>
<details>
<summary>components/DrinkCustomizationModal.tsx (2)</summary><blockquote>

`12-26`: **Use consistent naming convention for brand constants.**

The brand array constants use inconsistent naming conventions - some with spaces (HALF LITER), some without (LITERANDHALF). Consider standardizing for better maintainability.

```diff
-const BRANDHALFLITER = [
+const BRAND_HALF_LITER = [
  { id: "coca_cola", name: "Coca Cola", price: 4 },
  { id: "inca_kola", name: "Inca Kola", price: 4 },
  { id: "sprite", name: "Sprite", price: 3 },
  { id: "fanta", name: "Fanta", price: 3 }
];
-const BRANDLITERANDHALF = [
+const BRAND_LITER_AND_HALF = [
  { id: "coca_cola", name: "Coca Cola", price: 10 },
  { id: "inca_kola", name: "Inca Kola", price: 10 },
];

-const BRANDS2LITERS = [
+const BRAND_2_LITERS = [
  { id: "coca_cola", name: "Coca Cola", price: 12 },
  { id: "inca_kola", name: "Inca Kola", price: 12 },
];
```

---

`33-38`: **Document product IDs in helper function.**

The `getBrandsByProductId` function references specific product IDs without explaining what each represents. Consider adding a comment or using named constants to improve code readability.

```diff
+// Product ID constants for better readability
+const HALF_LITER_ID = 75;
+const LITER_AND_HALF_ID = 73;
+const TWO_LITERS_ID = 72;

const getBrandsByProductId = (id: number) => {
-  if (id === 75) return BRANDHALFLITER;
-  if (id === 73) return BRANDLITERANDHALF;
-  if (id === 72) return BRANDS2LITERS;
+  if (id === HALF_LITER_ID) return BRAND_HALF_LITER;
+  if (id === LITER_AND_HALF_ID) return BRAND_LITER_AND_HALF;
+  if (id === TWO_LITERS_ID) return BRAND_2_LITERS;
  return [];
};
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 2ff900030d5b021685bd66ccd6c52c48f4673d27 and f58c94b5a0c7cf02eab212559af6b8cbad13db93.

</details>

<details>
<summary>📒 Files selected for processing (6)</summary>

* `app/index.tsx` (0 hunks)
* `components/BurgerCustomizationModal.tsx` (3 hunks)
* `components/CategoryItem.tsx` (1 hunks)
* `components/DrinkCustomizationModal.tsx` (5 hunks)
* `components/ProductCard.tsx` (1 hunks)
* `store/category.ts` (1 hunks)

</details>

<details>
<summary>💤 Files with no reviewable changes (1)</summary>

* app/index.tsx

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (2)</summary>

<details>
<summary>store/category.ts (1)</summary><blockquote>

<details>
<summary>utils/supabase.ts (1)</summary>

* `supabase` (9-18)

</details>

</blockquote></details>
<details>
<summary>components/DrinkCustomizationModal.tsx (2)</summary><blockquote>

<details>
<summary>components/ui/text.tsx (1)</summary>

* `Text` (25-25)

</details>
<details>
<summary>components/ui/button.tsx (1)</summary>

* `Button` (84-84)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (9)</summary><blockquote>

<details>
<summary>store/category.ts (1)</summary>

`19-19`: **Improved category ordering logic.**

Changing the ordering from 'id' to 'order' is a good improvement as it provides more control over the presentation of categories in the UI rather than relying on database-assigned IDs.

</details>
<details>
<summary>components/CategoryItem.tsx (1)</summary>

`21-21`: **Good UI enhancement with centered text.**

Adding the `text-center` class improves the visual appearance of category names and aligns with the category reordering changes in the store.

</details>
<details>
<summary>components/BurgerCustomizationModal.tsx (6)</summary>

`9-9`: **LGTM - Input component import added for notes feature.**

Adding the Import component is necessary for the new notes feature implemented later in the file.

---

`16-17`: **Updated sauce options look good.**

Replacing "BBQ" with "Tártara" and "Ají" provides more relevant sauce options for the user.

---

`19-22`: **Improved fries options presentation.**

Renaming from SIDES to FRIES and updating the options to "Fritas" and "Al hilo" makes the selection more specific and clear.

---

`98-98`: **Better section label.**

Changing "Extras" to "Papas" makes the UI labeling more specific and accurate.

---

`100-110`: **Updated fries section UI.**

The code correctly updates the rendering logic to use the new FRIES array.

---

`113-124`: **Good addition of notes input field.**

Adding a multiline text input for notes enhances the user experience by allowing more detailed customization instructions.

</details>
<details>
<summary>components/ProductCard.tsx (1)</summary>

`121-121`: **Consistent approach to handling text input.**

Using the explicit callback `(text) => setNotes(text)` instead of directly passing `setNotes` makes the code more consistent with other components like BurgerCustomizationModal.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-26T23:57:43Z

Review comments:
diff_hunk: @@ -30,6 +32,7 @@ export const BurgerCustomizationModal = ({ show, onClose, product }: BurgerCusto
   const { addItem } = useCartStore();
   const [selectedSauces, setSelectedSauces] = useState<string[]>([]);
   const [selectedSides, setSelectedSides] = useState<string[]>([]);
+  const [notes, setNotes] = useState<string>("");
path: components/BurgerCustomizationModal.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Note state added but not used in cart item.**

The notes state is initialized but not included when adding the item to the cart in the `handleAddToCart` function.


Update the `handleAddToCart` function to include the notes in the customizations:

```diff
const handleAddToCart = () => {
  const added = addItem({
    ...product,
    quantity: 1,
    customizations: {
      sauces: selectedSauces,
      sides: selectedSides,
+     notes: notes
    },
  });
  setSelectedSauces([]);
  setSelectedSides([]);
+ setNotes("");
  onClose();
  // rest of the function...
}
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
const handleAddToCart = () => {
  const added = addItem({
    ...product,
    quantity: 1,
    customizations: {
      sauces: selectedSauces,
      sides: selectedSides,
      notes: notes
    },
  });
  setSelectedSauces([]);
  setSelectedSides([]);
  setNotes("");
  onClose();
  // rest of the function...
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-26T23:57:42Z
author_association: NONE
diff_hunk: @@ -22,6 +46,9 @@ interface DrinkCustomizationModalProps {
 export const DrinkCustomizationModal = ({ show, onClose, product }: DrinkCustomizationModalProps) => {
   const { addItem } = useCartStore();
   const [selectedBrand, setSelectedBrand] = useState<string | null>(null);
+  const [selectedTemperature, setSelectedTemperature] = useState<string | null>(null);
+
+  const brands = getBrandsByProductId(product.id);
path: components/DrinkCustomizationModal.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Add validation for selected temperature.**

You've added temperature selection state but there's no validation for it similar to brand selection. Consider adding a check in the `handleAddToCart` function to ensure a temperature is selected.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-26T23:57:42Z
author_association: NONE
diff_hunk: @@ -81,6 +108,23 @@ export const DrinkCustomizationModal = ({ show, onClose, product }: DrinkCustomi
             ))}
           </View>
         </View>
+        <View className="gap-4">
+          <Text className="font-semibold mt-2">Temperatura</Text>
+          <View className="flex-row flex-wrap gap-2">
+            {TEMPERATURE.map(temp => (
+              <Button
+                key={temp.id}
+                variant={selectedTemperature === temp.id ? "default" : "outline"}
+                size="sm"
+                className="rounded-full"
+                onPress={() => setSelectedTemperature(temp.id)}
+                accessibilityLabel={`Seleccionar ${temp.name}`}
+              >
+                <Text>{temp.name}</Text>
+              </Button>
+            ))}
+          </View>
+        </View>
         <DialogFooter>
           <Button onPress={handleAddToCart} size="lg" className="w-full" disabled={!selectedBrand}>
             <Text className="font-semibold">Agregar al carrito</Text>
path: components/DrinkCustomizationModal.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Update button disabled state to check temperature selection.**

The "Agregar al carrito" button should be disabled if either brand or temperature is not selected.

```diff
<Button 
  onPress={handleAddToCart} 
  size="lg" 
  className="w-full" 
- disabled={!selectedBrand}
+ disabled={!selectedBrand || !selectedTemperature}
>
```



<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
          <Button 
            onPress={handleAddToCart} 
            size="lg" 
            className="w-full" 
            disabled={!selectedBrand || !selectedTemperature}
          >
            <Text className="font-semibold">Agregar al carrito</Text>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-26T23:57:42Z
author_association: NONE

PR comments:
user: login: vercel[bot]
created_at: 2025-04-26T23:56:10Z
body: [vc]: #ZqROJ5Z/k9PjLcyEKhp1gwTT5Dhkv1fqFhTFtUGfiHQ=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0cmFja2lmeSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9icmF5YW4tcGF1Y2Fycy1wcm9qZWN0cy90cmFja2lmeS8zSHM4U2V2NlY2aG5xOWM0Yk5rU1FabkZiR252IiwicHJldmlld1VybCI6InRyYWNraWZ5LWdpdC1mZWF0LXJlb3JkZXJpbmctZmVlZGJhY2stYnJheWFuLXBhdWNhcnMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0cmFja2lmeS1naXQtZmVhdC1yZW9yZGVyaW5nLWZlZWRiYWNrLWJyYXlhbi1wYXVjYXJzLXByb2plY3RzLnZlcmNlbC5hcHAifSwicm9vdERpcmVjdG9yeSI6bnVsbH1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **trackify** | ✅ Ready ([Inspect](https://vercel.com/brayan-paucars-projects/trackify/3Hs8Sev6V6hnq9c4bNkSQZnFbGnv)) | [Visit Preview](https://trackify-git-feat-reordering-feedback-brayan-paucars-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/trackify-git-feat-reordering-feedback-brayan-paucars-projects.vercel.app?via=pr-comment-feedback-link) | Apr 26, 2025 11:57pm |


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-04-26T23:56:12Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

This update introduces several UI and logic changes across multiple components. The BurgerCustomizationModal now features updated sauce and fries options, a new notes input field, and revised section labels. DrinkCustomizationModal replaces a static brand list with dynamic brand arrays based on product ID, adds a temperature selection option, and updates related state management. CategoryItem centers its category name text, while ProductCard slightly alters the text input handler for notes. The category store now fetches categories ordered by the 'order' field instead of 'id'. Minor cleanup was performed in app/index.tsx by removing unused color scheme logic.

## Changes

| File(s)                                             | Change Summary                                                                                                         |
|-----------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|
| app/index.tsx                                       | Removed destructuring and usage of `isDarkColorScheme` from the `useColorScheme` hook in HomeScreen.                  |
| components/BurgerCustomizationModal.tsx             | Updated sauces and sides (now fries) options; added `notes` state and multiline input; changed "Extras" to "Papas".   |
| components/DrinkCustomizationModal.tsx              | Replaced static brand list with dynamic arrays by product ID; added temperature selection; updated related state/UI.   |
| components/CategoryItem.tsx                         | Added `text-center` class to center category name text.                                                               |
| components/ProductCard.tsx                          | Changed `onChangeText` handler in ProductAddedModal to use an explicit arrow function for notes input.                 |
| store/category.ts                                   | Changed category fetch ordering from 'id' to 'order' field.                                                           |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant BurgerCustomizationModal
    participant DrinkCustomizationModal
    participant Store

    User->>BurgerCustomizationModal: Opens modal
    BurgerCustomizationModal->>User: Displays sauces, fries, and notes input
    User->>BurgerCustomizationModal: Selects sauces/fries, enters notes
    BurgerCustomizationModal->>Store: Adds customized burger to cart

    User->>DrinkCustomizationModal: Opens modal
    DrinkCustomizationModal->>User: Displays brands (by product), temperature options
    User->>DrinkCustomizationModal: Selects brand, temperature
    DrinkCustomizationModal->>Store: Adds customized drink to cart
```

## Possibly related PRs

- kralion/trackify#5: Introduced and implemented the initial customization modals that are extended in this PR.
- kralion/trackify#6: Modified the BurgerCustomizationModal's add-to-cart logic, affecting the same component as this PR but focusing on toast notifications.

## Poem

> A bunny hops with code anew,  
> Fries and sauces—choices grew!  
> Drinks now chilled or gently warm,  
> Notes for burgers, a tasty charm.  
> Categories line up in perfect order,  
> Centered names—no text disorder.  
> With every nibble, features bloom—  
> This update brings the menu room! 🥕

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=kralion/trackify&utm_content=7):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE