Add manual product

app.json

@@ -1,7 +1,7 @@
 {
     "expo": {
         "name": "Resty",
-        "slug": "Resty",
+        "slug": "restApp",
         "version": "2.0.0",
         "orientation": "portrait",
         "icon": "./assets/coro.jpg",
@@ -19,7 +19,7 @@
         },
         "android": {
             "adaptiveIcon": {
-                "foregroundImage": "./assets/adaptive-icon.png",
+                "foregroundImage": "./assets/coro.jpg",
                 "backgroundColor": "#ffffff"
             },
             "package": "com.andremoreira9.restApp"

src/components/orders/active/CustomProduct.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import Text from "../../Text";
+import { NewProductProps } from "../../../types/stack/ProductStack";
+import DropDownPicker from "react-native-dropdown-picker";
+import theme from "../../../theme";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import { View, StyleSheet, TextInput } from "react-native";
+import ContainerStyle from "../../../styles/Containers";
+import Header from "../../headers/Header";
+import Divider from "../../Divider";
+import Button from "../../Button";
+import {
+  createManualProduct,
+  createProduct,
+} from "../../../services/orderService";
+import useCategories from "../../../hooks/useCategories";
+import { getCategoryNameById } from "../../../config/helpers";
+import { Product } from "../../../types/Product";
+import { OrderAddCustomProps } from "../../../types/stack/OrderStack";
+
+const Styles = StyleSheet.create({
+  rowContainer: {
+    paddingVertical: 5,
+    paddingHorizontal: 0,
+  },
+});
+
+const ProductSchema = Yup.object().shape({
+  name: Yup.string().required("Product name is required"),
+  price: Yup.number().required("Product price is required"),
+});
+
+const CustomProduct = ({ navigation, route }: OrderAddCustomProps) => {
+  const { id } = route.params;
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const onCreateProduct = async (name: string, price: string) => {
+    setLoading(true);
+    const product = await createManualProduct(name, Number(price), id);
+
+    navigation.goBack();
+    setLoading(false);
+  };
+  return (
+    <View style={ContainerStyle.contentContainer}>
+      <Header title="New product" goBack={() => navigation.goBack()} />
+
+      <Divider />
+
+      <Formik
+        initialValues={{ name: "", price: "", category: "" }}
+        validationSchema={ProductSchema}
+        onSubmit={(values) => {
+          onCreateProduct(values.name, values.price);
+        }}
+      >
+        {({
+          handleChange,
+          handleBlur,
+          handleSubmit,
+          setFieldValue,
+          errors,
+          touched,
+          values,
+        }) => (
+          <View>
+            <View style={Styles.rowContainer}>
+              <Text fontSize="body" fontWeight="bold" color="textPrimary">
+                Product name
+              </Text>
+              <TextInput
+                placeholder="Name for the product"
+                onChangeText={handleChange("name")}
+                onBlur={handleBlur("name")}
+                value={values.name}
+                style={{ paddingTop: 5 }}
+              ></TextInput>
+              {touched.name && errors.name && (
+                <Text style={{ color: theme.colors.error }}>{errors.name}</Text>
+              )}
+            </View>
+
+            <Divider />
+
+            <View style={Styles.rowContainer}>
+              <Text fontSize="body" fontWeight="bold" color="textPrimary">
+                Price
+              </Text>
+              <TextInput
+                placeholder="Price in euros (€)"
+                onChangeText={(text) => {
+                  const cleanedText = text.replace(",", ".");
+                  setFieldValue("price", cleanedText);
+                  handleChange("price")(cleanedText);
+                }}
+                onBlur={handleBlur("price")}
+                value={values.price}
+                keyboardType="numeric"
+                style={{ paddingTop: 5 }}
+              ></TextInput>
+              {touched.price && errors.price && (
+                <Text style={{ color: theme.colors.error }}>
+                  {errors.price}
+                </Text>
+              )}
+            </View>
+
+            <Divider />
+
+            <Button
+              text="Create"
+              onPress={handleSubmit}
+              icon="add"
+              loading={loading}
+            ></Button>
+          </View>
+        )}
+      </Formik>
+    </View>
+  );
+};
+
+export default CustomProduct;

src/components/orders/active/OrderStack.tsx

@@ -7,6 +7,8 @@ import ProductsList from "./ProductsList";
 import PrintOrderPage from "./PrintOrder";
 import EditOrder from "../EditOrder";
 import HistoryOrderList from "../history/HistoryOrderList";
+import NewProduct from "../../products/NewProduct";
+import CustomProduct from "./CustomProduct";
 
 const Stack = createStackNavigator<OrderStackNavigatorParamList>();
 
@@ -21,6 +23,7 @@ const OrdersStack = () => {
       <Stack.Screen name="HistoryOrderList" component={HistoryOrderList} />
       <Stack.Screen name="CreateOrder" component={CreateOrder} />
       <Stack.Screen name="Order/Add" component={ProductsList} />
+      <Stack.Screen name="Order/Add/Custom" component={CustomProduct} />
       <Stack.Screen name="Order/Print" component={PrintOrderPage} />
     </Stack.Navigator>
   );

src/components/orders/active/ProductsList.tsx

@@ -6,7 +6,11 @@ import ContainerStyle from "../../../styles/Containers";
 import useLiveOrder from "../../../hooks/orders/useLiveOrder";
 import React, { useEffect, useMemo, useState } from "react";
 import LoadingComponent from "../../LoadingComponent";
-import { CategoryProducts, ProductWithAmount } from "../../../types/Order";
+import {
+  CategoryProducts,
+  Order,
+  ProductWithAmount,
+} from "../../../types/Order";
 import { MaterialIcons } from "@expo/vector-icons";
 import Text from "../../Text";
 import { OrderProduct } from "../../../types/OrderProduct";
@@ -17,15 +21,18 @@ import { Category } from "../../../types/Category";
 import theme from "../../../theme";
 import { ScrollView } from "react-native-gesture-handler";
 import useSnackbar from "../../../hooks/useSnackbar";
+import Button from "../../Button";
 
 const Products = ({
   navigation,
   id,
   products,
+  order,
 }: {
   navigation: OrderAddProps["navigation"];
   id: string;
   products: ProductWithAmount[];
+  order: Order;
 }) => {
   return (
     <ScrollView>
@@ -42,6 +49,7 @@ const Products = ({
             product={orderProduct}
             key={product.id}
             deletable={false}
+            orderClosed={order.closed}
           />
         );
       })}
@@ -144,8 +152,16 @@ export default function ProductsList({ navigation, route }: OrderAddProps) {
           navigation={navigation}
           id={id}
           products={selectedCategory.products}
+          order={order}
         />
       )}
+
+      <Button
+        text="Manual"
+        icon="print"
+        onPress={() => navigation.navigate("Order/Add/Custom", { id })}
+        style={{ marginTop: 20, marginBottom: 20 }}
+      />
     </View>
   );
 }

src/components/products/Product.tsx

@@ -28,8 +28,6 @@ const Product = ({ navigation, route }: ProductProps) => {
   const [loading, setLoading] = useState(false);
   const { user, initializing } = useAuth();
 
-  console.log(user);
-
   const [productDetails, setProductDetails] = useState({
     currentName: product.name,
     currentPrice: product.price,

src/services/orderService.ts

@@ -158,14 +158,37 @@ export const createProduct = async (
   categoryId: number
 ) => {
   try {
-    const response = await api.post("/products", { name, price, categoryId });
+    const response = await api.post("/products", {
+      name,
+      price,
+      categoryId,
+      manual: false,
+    });
     return response.data;
   } catch (error) {
     Sentry.Native.captureException(error);
     console.error("Error in creating a product:", error);
   }
 };
 
+export const createManualProduct = async (
+  name: string,
+  price: number,
+  orderId: string
+) => {
+  try {
+    const response = await api.post(`/orders/${orderId}/custom`, {
+      name,
+      price,
+      manual: true,
+    });
+    return response.data;
+  } catch (error) {
+    Sentry.Native.captureException(error);
+    console.error("Error in creating a manual product:", error);
+  }
+};
+
 export const updateProduct = async (
   id: number,
   name: string,

src/types/stack/OrderStack.ts

@@ -6,6 +6,7 @@ export type OrderStackNavigatorParamList = {
   OrderList: undefined;
   HistoryOrderList: undefined;
   Order: { id: string };
+  "Order/Add/Custom": { id: string };
   "Order/Add": { id: string };
   "Order/Print": { id: string };
   "Order/Edit": { id: string };
@@ -21,6 +22,11 @@ type OrderAddNavigationProp = StackNavigationProp<
   "Order/Add"
 >;
 
+type OrderAddCustomNavigationProp = StackNavigationProp<
+  OrderStackNavigatorParamList,
+  "Order/Add/Custom"
+>;
+
 type OrderListNavigationProp = StackNavigationProp<
   OrderStackNavigatorParamList,
   "OrderList"
@@ -78,3 +84,8 @@ export type OrderAddProps = {
   navigation: OrderAddNavigationProp;
   route: RouteProp<OrderStackNavigatorParamList, "Order/Add">;
 };
+
+export type OrderAddCustomProps = {
+  navigation: OrderAddCustomNavigationProp;
+  route: RouteProp<OrderStackNavigatorParamList, "Order/Add/Custom">;
+};