Integrasi Map Business

Add:
 components/Map/MapSelected.tsx
        components/_ShareComponent/GridTwoView.tsx
        service/api-client/api-maps.ts
utils/openInDeviceMaps.ts

Fix:
 modified:   app/(application)/(user)/maps/[id]/edit.tsx
        modified:   app/(application)/(user)/maps/create.tsx
        modified:   app/(application)/(user)/maps/index.tsx
        modified:   app/(application)/(user)/portofolio/[id]/index.tsx
        modified:   components/Map/MapCustom.tsx
        modified:   screens/Portofolio/BusinessLocationSection.tsx
        modified:   screens/Portofolio/DataPortofolio.tsx
        modified:   screens/Portofolio/ListPage.tsx

### No issue

app/(application)/(user)/maps/create.tsx

@@ -6,21 +6,96 @@ import {
   InformationBox,
   LandscapeFrameUploaded,
   Spacing,
-  TextCustom,
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
+import MapSelected from "@/components/Map/MapSelected";
+import DIRECTORY_ID from "@/constants/directory-id";
+import { useAuth } from "@/hooks/use-auth";
+import { apiMapsCreate } from "@/service/api-client/api-maps";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile, { IFileData } from "@/utils/pickFile";
 import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { LatLng } from "react-native-maps";
+import Toast from "react-native-toast-message";
 
 export default function MapsCreate() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
+  const [selectedLocation, setSelectedLocation] = useState<LatLng | null>(null);
+  const [name, setName] = useState<string>("");
+  const [image, setImage] = useState<IFileData | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    try {
+      setLoading(true);
+      let newData: any;
+      newData = {
+        authorId: user?.id,
+        portofolioId: id,
+        namePin: name,
+        latitude: selectedLocation?.latitude,
+        longitude: selectedLocation?.longitude,
+      };
+
+      if (image) {
+        const responseUpload = await uploadFileService({
+          dirId: DIRECTORY_ID.map_image,
+          imageUri: image?.uri,
+        });
+
+        if (!responseUpload?.data?.id) {
+          Toast.show({
+            type: "error",
+            text1: "Gagal mengunggah gambar",
+          });
+          return;
+        }
+
+        const imageId = responseUpload?.data?.id;
+
+        newData = {
+          authorId: user?.id,
+          portofolioId: id,
+          namePin: name,
+          latitude: selectedLocation?.latitude,
+          longitude: selectedLocation?.longitude,
+          imageId: imageId,
+        };
+      }
+
+      const response = await apiMapsCreate({
+        data: newData,
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal menambahkan map",
+        });
+        return;
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Map berhasil ditambahkan",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const buttonFooter = (
     <BoxButtonOnFooter>
       <ButtonCustom
-        onPress={() => {
-          console.log(`Simpan maps ${id}`);
-          router.replace(`/portofolio/${id}`);
-        }}
+        isLoading={isLoading}
+        disabled={!selectedLocation || name === ""}
+        onPress={handleSubmit}
       >
         Simpan
       </ButtonCustom>
@@ -30,25 +105,34 @@ export default function MapsCreate() {
     <ViewWrapper footerComponent={buttonFooter}>
       <InformationBox text="Tentukan lokasi pin map dengan menekan pada map." />
 
-      <BaseBox style={{ height: 400 }}>
-        <TextCustom>Maps Her</TextCustom>
+      <BaseBox>
+        <MapSelected
+          selectedLocation={selectedLocation as any}
+          setSelectedLocation={setSelectedLocation}
+        />
       </BaseBox>
 
       <TextInputCustom
         required
         label="Nama Pin"
         placeholder="Masukkan nama pin maps"
+        value={name}
+        onChangeText={setName}
       />
 
       <Spacing height={50} />
 
       <InformationBox text="Upload foto lokasi bisnis anda untuk ditampilkan dalam detail maps." />
-      <LandscapeFrameUploaded />
+      <LandscapeFrameUploaded image={image?.uri} />
       <ButtonCenteredOnly
         icon="upload"
         onPress={() => {
-          console.log("Upload foto ");
-          router.navigate(`/take-picture/${id}`);
+          pickFile({
+            allowedType: "image",
+            setImageUri(file) {
+              setImage(file);
+            },
+          });
         }}
       >
         Upload