wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: user

Browse Source 
Deskripsi:
- penambahan modal untuk memberi redirect ke whatsapp
This commit is contained in:
Bagasbanuna02
2025-01-03 14:22:10 +08:00
parent 85463f5a89
commit 215accbcaa
6 changed files with 494 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/zCoba/skeleton/page.tsx
View File

@@ -5,7 +5,8 @@ import {
UIGlobal_LayoutHeaderTamplate, UIGlobal_LayoutHeaderTamplate,
UIGlobal_LayoutTamplate, UIGlobal_LayoutTamplate,
} from "@/app_modules/_global/ui"; } from "@/app_modules/_global/ui";
import { Grid, Skeleton, Stack } from "@mantine/core"; import { Button, Grid, Skeleton, Stack } from "@mantine/core";
import Link from "next/link";
export default function Voting_ComponentSkeletonViewPuh() { export default function Voting_ComponentSkeletonViewPuh() {
return ( return (
@@ -13,6 +14,25 @@ export default function Voting_ComponentSkeletonViewPuh() {
<UIGlobal_LayoutTamplate <UIGlobal_LayoutTamplate
header={<UIGlobal_LayoutHeaderTamplate title="Skeleton Maker" />} header={<UIGlobal_LayoutHeaderTamplate title="Skeleton Maker" />}
> >
<Button
>
<Link
color="white"
style={{
color: "white",
textDecoration: "none",
}}
target="_blank"
href={
"https://wa.me/+6281339158911?text=Hallo , Apa boleh saya minta informasi tentang DariBaliMice?"
}
>
{" "}
Kirim
</Link>
</Button>
<Stack> <Stack>
<ComponentGlobal_CardStyles marginBottom={"0"}> <ComponentGlobal_CardStyles marginBottom={"0"}>
<Stack> <Stack>

15
src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
View File

@@ -22,7 +22,7 @@ export function Portofolio_ComponentButtonSelanjutnya({
profileId: string; profileId: string;
dataPortofolio: MODEL_PORTOFOLIO_OLD; dataPortofolio: MODEL_PORTOFOLIO_OLD;
dataMedsos: any; dataMedsos: any;
imageId: string imageId: string;
}) { }) {
const router = useRouter(); const router = useRouter();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -36,11 +36,18 @@ export function Portofolio_ComponentButtonSelanjutnya({
deskripsi: dataPortofolio.deskripsi, deskripsi: dataPortofolio.deskripsi,
}; };
if (_.values(porto).includes("")) {
ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
return;
}
if (dataPortofolio.tlpn.length < 10) {
ComponentGlobal_NotifikasiPeringatan("Nomor telepon minimal 10 angka");
return;
}
try { try {
setLoading(true); setLoading(true);
if (_.values(porto).includes("")) {
return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
}
const res = await funCreatePortofolio({ const res = await funCreatePortofolio({
profileId: profileId, profileId: profileId,
data: dataPortofolio as any, data: dataPortofolio as any,

126
src/app_modules/katalog/portofolio/create/view.tsx
View File

@@ -30,6 +30,8 @@ import {
funGlobal_UploadToStorage, funGlobal_UploadToStorage,
} from "@/app_modules/_global/fun"; } from "@/app_modules/_global/fun";
import { DIRECTORY_ID } from "@/app/lib"; import { DIRECTORY_ID } from "@/app/lib";
import { PhoneInput } from "react-international-phone";
import "react-international-phone/style.css";
export default function CreatePortofolio({ export default function CreatePortofolio({
bidangBisnis, bidangBisnis,
@@ -69,12 +71,12 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
}, // },
required: { // required: {
color: MainColor.red, // color: MainColor.red,
} // },
}} }}
withAsterisk withAsterisk
label="Nama Bisnis" label="Nama Bisnis"
@@ -88,17 +90,16 @@ export default function CreatePortofolio({
}} }}
/> />
<Select <Select
styles={{ styles={{
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
}, // },
required: { // required: {
color: MainColor.red, // color: MainColor.red,
} // },
}} }}
withAsterisk withAsterisk
label="Bidang Bisnis" label="Bidang Bisnis"
@@ -114,17 +115,18 @@ export default function CreatePortofolio({
}); });
}} }}
/> />
<TextInput <TextInput
styles={{ styles={{
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
}, // },
required: { // required: {
color: MainColor.red, // color: MainColor.red,
} // },
}} }}
withAsterisk withAsterisk
label="Alamat Bisnis" label="Alamat Bisnis"
@@ -137,17 +139,40 @@ export default function CreatePortofolio({
}); });
}} }}
/> />
<TextInput
<Stack spacing={5}>
<Text c={MainColor.white} fz={"sm"}>
Nomor Telepon{" "}
<Text c={"red"} span inherit>
*
</Text>
</Text>
<PhoneInput
placeholder="Nomor telepon"
inputStyle={{ width: "100%" }}
defaultCountry="id"
onChange={(val) => {
const valPhone = val.substring(1);
setDataPortofolio({
...dataPortofolio,
tlpn: valPhone,
});
}}
/>
</Stack>
{/* <TextInput
styles={{ styles={{
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
}, // },
required: { // required: {
color: MainColor.red, // color: MainColor.red,
} // },
}} }}
withAsterisk withAsterisk
label="Nomor Telepon " label="Nomor Telepon "
@@ -159,19 +184,20 @@ export default function CreatePortofolio({
tlpn: val.target.value, tlpn: val.target.value,
}); });
}} }}
/> /> */}
<Stack spacing={5}> <Stack spacing={5}>
<Textarea <Textarea
styles={{ styles={{
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
}, // },
required: { // required: {
color: MainColor.red, // color: MainColor.red,
} // },
}} }}
maxLength={300} maxLength={300}
autosize autosize
@@ -208,7 +234,9 @@ export default function CreatePortofolio({
</AspectRatio> </AspectRatio>
) : ( ) : (
<Stack spacing={5} justify="center" align="center" h={"100%"}> <Stack spacing={5} justify="center" align="center" h={"100%"}>
<Title c={MainColor.white} order={3}>Upload Logo Bisnis</Title> <Title c={MainColor.white} order={3}>
Upload Logo Bisnis
</Title>
<Text c={MainColor.white} fs={"italic"} fz={10} align="center"> <Text c={MainColor.white} fs={"italic"} fz={10} align="center">
Masukan logo bisnis anda untuk ditampilkan dalam portofolio Masukan logo bisnis anda untuk ditampilkan dalam portofolio
</Text> </Text>
@@ -308,9 +336,9 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
} // },
}} }}
label="Facebook" label="Facebook"
maxLength={100} maxLength={100}
@@ -327,9 +355,9 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
} // },
}} }}
label="Instagram" label="Instagram"
maxLength={100} maxLength={100}
@@ -346,9 +374,9 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
} // },
}} }}
label="Tiktok" label="Tiktok"
maxLength={100} maxLength={100}
@@ -365,9 +393,9 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
} // },
}} }}
label="Twitter" label="Twitter"
maxLength={100} maxLength={100}
@@ -384,9 +412,9 @@ export default function CreatePortofolio({
label: { label: {
color: MainColor.white, color: MainColor.white,
}, },
input: { // input: {
backgroundColor: MainColor.white // backgroundColor: MainColor.white,
} // },
}} }}
label="Youtube" label="Youtube"
maxLength={100} maxLength={100}

279
src/app_modules/katalog/portofolio/ui/ui_detail_data_new.tsx
View File

@@ -1,131 +1,186 @@
import { AccentColor, MainColor } from "@/app_modules/_global/color"; import { AccentColor, MainColor } from "@/app_modules/_global/color";
import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component"; import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
import { Box, Divider, Grid, Group, Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core"; import {
Box,
Button,
Divider,
Grid,
Group,
Paper,
SimpleGrid,
Stack,
Text,
Title,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { IconBuildingSkyscraper, IconListDetails, IconMapPin, IconPhoneCall, IconPinned } from "@tabler/icons-react"; import {
IconBuildingSkyscraper,
IconListDetails,
IconMapPin,
IconPhoneCall,
IconPinned,
} from "@tabler/icons-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { apiGetOnePortofolioById } from "../lib/api_portofolio"; import { apiGetOnePortofolioById } from "../lib/api_portofolio";
import { IDetailPortofolioBisnis } from "../lib/type_portofolio"; import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
import SkeletonDetailBisnis from "./ui_skeleton_detail_bisnis"; import SkeletonDetailBisnis from "./ui_skeleton_detail_bisnis";
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
import Link from "next/link";
export default function Portofolio_UiDetailDataNew() { export default function Portofolio_UiDetailDataNew() {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true);
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>();
const [dataPorto, setDataPorto] = useState<IDetailPortofolioBisnis>(); const [dataPorto, setDataPorto] = useState<IDetailPortofolioBisnis>();
const [openModal, setOpenModal] = useState(false);
async function funGetPortofolio() { async function funGetPortofolio() {
try { try {
setLoading(true) setLoading(true);
const response = await apiGetOnePortofolioById(param.id, "bisnis"); const response = await apiGetOnePortofolioById(param.id, "bisnis");
if (response.success) { if (response.success) {
setDataPorto(response.data); setDataPorto(response.data);
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
} }
} } catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
useShallowEffect(() => { useShallowEffect(() => {
funGetPortofolio() funGetPortofolio();
}, []); }, []);
return ( return (
<> <>
<Paper <Paper
p={"sm"} p={"sm"}
style={{ style={{
backgroundColor: AccentColor.darkblue, backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`, border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ", borderRadius: "10px ",
padding: "15px", padding: "15px",
color: MainColor.white, color: MainColor.white,
}} }}
> >
{ {loading ? (
loading ? <SkeletonDetailBisnis />
<SkeletonDetailBisnis /> ) : (
: <Stack>
<Stack> <Group position="apart">
<Group position="apart"> <Title order={6}>Data Bisnis</Title>
<Title order={6}>Data Bisnis</Title> <Text color={MainColor.yellow} fw={"bold"}>
<Text color={MainColor.yellow} fw={"bold"}> id: {" "}
id: {" "} <Text span inherit>
<Text span inherit> #{dataPorto?.id_Portofolio}
#{dataPorto?.id_Portofolio} </Text>
</Text> </Text>
</Text> </Group>
</Group> <Stack>
<Stack> <SimpleGrid
<SimpleGrid cols={2}
cols={2} spacing={"md"}
spacing={"md"} breakpoints={[
breakpoints={[ { maxWidth: "62rem", cols: 2, spacing: "md" },
{ maxWidth: "62rem", cols: 2, spacing: "md" }, { maxWidth: "48rem", cols: 1, spacing: "sm" },
{ maxWidth: "48rem", cols: 1, spacing: "sm" }, { maxWidth: "36rem", cols: 1, spacing: "sm" },
{ maxWidth: "36rem", cols: 1, spacing: "sm" }, ]}
]} >
> <Box>
<Box> <Paper>
<Paper> <ComponentGlobal_LoadImage
<ComponentGlobal_LoadImage fileId={String(dataPorto?.logoId)} /> fileId={String(dataPorto?.logoId)}
</Paper> />
</Box> </Paper>
</Box>
<Box> <Box>
<Grid> <Grid>
<Grid.Col span={2}> <Grid.Col span={2}>
<IconBuildingSkyscraper /> <IconBuildingSkyscraper />
</Grid.Col> </Grid.Col>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<Text>{dataPorto?.namaBisnis}</Text> <Text>{dataPorto?.namaBisnis}</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Grid> <Grid>
<Grid.Col span={2}> <Grid.Col span={2}>
<IconListDetails /> <IconListDetails />
</Grid.Col> </Grid.Col>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<Text>{dataPorto?.bidangBisnis}</Text> <Text>{dataPorto?.bidangBisnis}</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Grid> <Grid>
<Grid.Col span={2}> <Grid.Col span={2}>
<IconPhoneCall /> <IconPhoneCall />
</Grid.Col> </Grid.Col>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<Text>{dataPorto?.tlpn}</Text> <Text
</Grid.Col> onClick={() => {
</Grid> setOpenModal(true);
<Grid> }}
<Grid.Col span={2}> >
<IconMapPin /> + {dataPorto?.tlpn}
</Grid.Col> </Text>
<Grid.Col span={"auto"}> </Grid.Col>
<Text>{dataPorto?.alamatKantor}</Text> </Grid>
</Grid.Col> <Grid>
</Grid> <Grid.Col span={2}>
</Box> <IconMapPin />
</SimpleGrid> </Grid.Col>
</Stack> <Grid.Col span={"auto"}>
<Text>{dataPorto?.alamatKantor}</Text>
</Grid.Col>
</Grid>
</Box>
</SimpleGrid>
</Stack>
<Divider color={AccentColor.softblue} /> <Divider color={AccentColor.softblue} />
<Stack spacing={5}> <Stack spacing={5}>
<Group spacing={"xs"}> <Group spacing={"xs"}>
<IconPinned /> <IconPinned />
<Text fz={"sm"} fw={"bold"}> <Text fz={"sm"} fw={"bold"}>
Tentang Kami Tentang Kami
</Text> </Text>
</Group> </Group>
<Text px={"sm"}>{dataPorto?.deskripsi}</Text> <Text px={"sm"}>{dataPorto?.deskripsi}</Text>
</Stack> </Stack>
</Stack> </Stack>
} )}
</Paper>
</Paper> <UIGlobal_Modal
</> title={
) "Anda akan dialihkan ke WhatsApp untuk melanjutkan percakapan. Tekan 'Lanjutkan' untuk melanjutkan."
}
opened={openModal}
close={() => {
setOpenModal(false);
}}
buttonKanan={
<Button radius={"xl"} color="yellow" c={MainColor.darkblue}>
<Link
style={{
color: "white",
textDecoration: "none",
}}
target="_blank"
href={`https://wa.me/+${dataPorto?.tlpn}?text=Hallo , saya tertarik dengan bisnis anda. Apa boleh saya minta informasi tentang bisnis ${dataPorto?.namaBisnis}.`}
>
Lanjutkan
</Link>
</Button>
}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
/>
</>
);
} }

288
src/app_modules/katalog/ui/profile_detail.tsx
View File

@@ -1,131 +1,193 @@
import { AccentColor, MainColor } from "@/app_modules/_global/color"; import { AccentColor, MainColor } from "@/app_modules/_global/color";
import { apiGetUserProfile, IUserProfile } from "@/app_modules/user"; import { apiGetUserProfile, IUserProfile } from "@/app_modules/user";
import { Box, Center, Group, Stack, Text, ThemeIcon } from "@mantine/core"; import {
Box,
Button,
Center,
Group,
Stack,
Text,
ThemeIcon,
} from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks"; import { useShallowEffect } from "@mantine/hooks";
import { IconBrandGmail, IconGenderFemale, IconGenderMale, IconHome, IconPhone } from "@tabler/icons-react"; import {
IconBrandGmail,
IconGenderFemale,
IconGenderMale,
IconHome,
IconPhone,
} from "@tabler/icons-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
import { Profile_ComponentAvatarProfile, Profile_ComponentLoadBackgroundImage } from "../profile/_component"; import {
Profile_ComponentAvatarProfile,
Profile_ComponentLoadBackgroundImage,
} from "../profile/_component";
import SkeletonProfile from "./skeleton_profile"; import SkeletonProfile from "./skeleton_profile";
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
import Link from "next/link";
export default function ProfileDetail() { export default function ProfileDetail() {
const param = useParams<{ id: string }>() const param = useParams<{ id: string }>();
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true);
const [dataProfile, setDataProfile] = useState<IUserProfile>() const [dataProfile, setDataProfile] = useState<IUserProfile>();
const listInformation = [ const [openModal, setOpenModal] = useState(false);
{
icon: <IconPhone color={MainColor.white} />,
value: "+" + dataProfile?.nomor,
},
{
icon: <IconBrandGmail color={MainColor.white} />,
value: dataProfile?.email,
},
{
icon: <IconHome color={MainColor.white} />,
value: dataProfile?.alamat,
},
{
icon:
dataProfile?.jenisKelamin === "Laki-laki" ? (
<IconGenderMale color={MainColor.white} />
) : (
<IconGenderFemale color={MainColor.white}/>
),
value: dataProfile?.jenisKelamin,
},
];
const listInformation = [
{
icon: <IconPhone color={MainColor.white} />,
value: (
<Text span inherit onClick={() => setOpenModal(true)}>
{"+" + dataProfile?.nomor}
</Text>
),
},
{
icon: <IconBrandGmail color={MainColor.white} />,
value: dataProfile?.email,
},
{
icon: <IconHome color={MainColor.white} />,
value: dataProfile?.alamat,
},
{
icon:
dataProfile?.jenisKelamin === "Laki-laki" ? (
<IconGenderMale color={MainColor.white} />
) : (
<IconGenderFemale color={MainColor.white} />
),
value: dataProfile?.jenisKelamin,
},
];
async function getProfile() { async function getProfile() {
try { try {
setLoading(true) setLoading(true);
const response = await apiGetUserProfile(`?profile=${param.id}`) const response = await apiGetUserProfile(`?profile=${param.id}`);
if (response.success) { if (response.success) {
setDataProfile(response.data); setDataProfile(response.data);
}
} catch (error) {
console.error(error);
} finally {
setLoading(false)
} }
} } catch (error) {
console.error(error);
} finally {
setLoading(false);
}
}
useShallowEffect(() => {
getProfile();
}, []);
useShallowEffect(() => { return (
getProfile() <>
}, []);
return <>
<Stack <Stack
spacing={0} spacing={0}
style={{ style={{
backgroundColor: AccentColor.darkblue, backgroundColor: AccentColor.darkblue,
border: `2px solid ${AccentColor.blue}`, border: `2px solid ${AccentColor.blue}`,
borderRadius: "10px ", borderRadius: "10px ",
padding: "15px", padding: "15px",
color: MainColor.white color: MainColor.white,
}} }}
> >
{ {loading ? (
loading ? <SkeletonProfile />
<SkeletonProfile /> : ) : (
<> <>
<Box> <Box>
<Profile_ComponentLoadBackgroundImage <Profile_ComponentLoadBackgroundImage
fileId={dataProfile?.imageBackgroundId as any} fileId={dataProfile?.imageBackgroundId as any}
size={500} size={500}
/> />
<Box <Box
sx={{ sx={{
position: "relative", position: "relative",
bottom: 60, bottom: 60,
margin: "auto", margin: "auto",
width: "100%", width: "100%",
marginBottom: -30, marginBottom: -30,
}} }}
> >
<Center> <Center>
<Profile_ComponentAvatarProfile <Profile_ComponentAvatarProfile
fileId={dataProfile?.imageId as any} fileId={dataProfile?.imageId as any}
style={{ style={{
borderStyle: "solid", borderStyle: "solid",
borderColor: AccentColor.darkblue, borderColor: AccentColor.darkblue,
borderWidth: "2px", borderWidth: "2px",
}} }}
/> />
</Center> </Center>
<Stack align="center" c={MainColor.white} mt={"xs"} spacing={0}> <Stack align="center" c={MainColor.white} mt={"xs"} spacing={0}>
<Text fw={"bold"} lineClamp={1} c={MainColor.white}> <Text fw={"bold"} lineClamp={1} c={MainColor.white}>
{dataProfile?.name} {dataProfile?.name}
</Text> </Text>
<Text fs={"italic"} fz={"sm"} c={MainColor.white} lineClamp={1}> <Text
@{dataProfile?.username} fs={"italic"}
</Text> fz={"sm"}
</Stack> c={MainColor.white}
</Box> lineClamp={1}
</Box> >
<Box> @{dataProfile?.username}
<Stack spacing={"xs"}> </Text>
{listInformation.map((e, i) => ( </Stack>
<Group key={i} align="flex-start"> </Box>
<ThemeIcon </Box>
style={{ <Box>
backgroundColor: "transparent", <Stack spacing={"xs"}>
}} {listInformation.map((e, i) => (
> <Group key={i} align="flex-start">
{e.icon} <ThemeIcon
</ThemeIcon> style={{
<Box w={"85%"}> backgroundColor: "transparent",
<Text c={MainColor.white} fw={"bold"}>{e?.value}</Text> }}
</Box> >
</Group> {e.icon}
))} </ThemeIcon>
</Stack> <Box w={"85%"}>
</Box> <Text c={MainColor.white} fw={"bold"}>
</> {e?.value}
} </Text>
</Box>
</Group>
))}
</Stack>
</Box>
</>
)}
</Stack> </Stack>
</>;
<UIGlobal_Modal
title={
"Anda akan dialihkan ke WhatsApp untuk melanjutkan percakapan. Tekan 'Lanjutkan' untuk melanjutkan."
}
opened={openModal}
close={() => {
setOpenModal(false);
}}
buttonKanan={
<Button radius={"xl"} color="yellow" c={MainColor.darkblue}>
<Link
color="white"
style={{
color: "white",
textDecoration: "none",
}}
target="_blank"
href={`https://wa.me/+${dataProfile?.nomor}?text=Hallo , saya tertarik dengan profile anda sebagai rekan HIPMI. Apakah saya bisa melanjutkan percakapan?`}
>
Lanjutkan
</Link>
</Button>
}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
/>
</>
);
} }

45
src/app_modules/map/_component/detail_data.tsx
View File

@@ -18,6 +18,8 @@ import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
import { MODEL_MAP } from "../lib/interface"; import { MODEL_MAP } from "../lib/interface";
import { ComponentMap_LoadImageMap } from "./comp_load_image_map"; import { ComponentMap_LoadImageMap } from "./comp_load_image_map";
import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data"; import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
import Link from "next/link";
export function ComponentMap_DetailData({ export function ComponentMap_DetailData({
mapId, mapId,
@@ -30,6 +32,7 @@ export function ComponentMap_DetailData({
const [data, setData] = useState<MODEL_MAP>(); const [data, setData] = useState<MODEL_MAP>();
const [dataUser, setDataUser] = useState<MODEL_USER>(); const [dataUser, setDataUser] = useState<MODEL_USER>();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [openModal, setOpenModal] = useState(false);
useShallowEffect(() => { useShallowEffect(() => {
onLoadData(setData, setDataUser); onLoadData(setData, setDataUser);
@@ -46,9 +49,7 @@ export function ComponentMap_DetailData({
return ( return (
<> <>
<Stack mt={"lg"} spacing={"xl"} px={"md"}> <Stack mt={"lg"} spacing={"xl"} px={"md"}>
<ComponentGlobal_AvatarAndUsername <ComponentGlobal_AvatarAndUsername profile={dataUser?.Profile as any} />
profile={dataUser?.Profile as any}
/>
<ComponentMap_LoadImageMap fileId={data.imageId} /> <ComponentMap_LoadImageMap fileId={data.imageId} />
@@ -74,7 +75,13 @@ export function ComponentMap_DetailData({
<IconPhoneCall /> <IconPhoneCall />
</Grid.Col> </Grid.Col>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<Text>{data?.Portofolio.tlpn}</Text> <Text
onClick={() => {
setOpenModal(true);
}}
>
+ {data?.Portofolio.tlpn}
</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
<Grid> <Grid>
@@ -127,6 +134,36 @@ export function ComponentMap_DetailData({
</Button> </Button>
</Group> </Group>
</Stack> </Stack>
<UIGlobal_Modal
title={
"Anda akan dialihkan ke WhatsApp untuk melanjutkan percakapan. Tekan 'Lanjutkan' untuk melanjutkan."
}
opened={openModal}
close={() => {
setOpenModal(false);
}}
buttonKanan={
<Button radius={"xl"} color="yellow" c={MainColor.darkblue}>
<Link
color="white"
style={{
color: "white",
textDecoration: "none",
}}
target="_blank"
href={`https://wa.me/+${data?.Portofolio.tlpn}?text=Hallo , saya tertarik dengan bisnis anda. Apa boleh saya minta informasi tentang bisnis ${data?.Portofolio.namaBisnis} ?`}
>
Lanjutkan
</Link>
</Button>
}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
/>
</> </>
); );
} }