fix: user
Deskripsi: - penambahan modal untuk memberi redirect ke whatsapp
This commit is contained in:
@@ -5,7 +5,8 @@ import {
|
||||
UIGlobal_LayoutHeaderTamplate,
|
||||
UIGlobal_LayoutTamplate,
|
||||
} 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() {
|
||||
return (
|
||||
@@ -13,6 +14,25 @@ export default function Voting_ComponentSkeletonViewPuh() {
|
||||
<UIGlobal_LayoutTamplate
|
||||
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>
|
||||
<ComponentGlobal_CardStyles marginBottom={"0"}>
|
||||
<Stack>
|
||||
|
||||
@@ -22,7 +22,7 @@ export function Portofolio_ComponentButtonSelanjutnya({
|
||||
profileId: string;
|
||||
dataPortofolio: MODEL_PORTOFOLIO_OLD;
|
||||
dataMedsos: any;
|
||||
imageId: string
|
||||
imageId: string;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -36,11 +36,18 @@ export function Portofolio_ComponentButtonSelanjutnya({
|
||||
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 {
|
||||
setLoading(true);
|
||||
if (_.values(porto).includes("")) {
|
||||
return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
|
||||
}
|
||||
const res = await funCreatePortofolio({
|
||||
profileId: profileId,
|
||||
data: dataPortofolio as any,
|
||||
|
||||
@@ -30,6 +30,8 @@ import {
|
||||
funGlobal_UploadToStorage,
|
||||
} from "@/app_modules/_global/fun";
|
||||
import { DIRECTORY_ID } from "@/app/lib";
|
||||
import { PhoneInput } from "react-international-phone";
|
||||
import "react-international-phone/style.css";
|
||||
|
||||
export default function CreatePortofolio({
|
||||
bidangBisnis,
|
||||
@@ -69,12 +71,12 @@ export default function CreatePortofolio({
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
}
|
||||
// input: {
|
||||
// backgroundColor: MainColor.white,
|
||||
// },
|
||||
// required: {
|
||||
// color: MainColor.red,
|
||||
// },
|
||||
}}
|
||||
withAsterisk
|
||||
label="Nama Bisnis"
|
||||
@@ -88,17 +90,16 @@ export default function CreatePortofolio({
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
}
|
||||
// input: {
|
||||
// backgroundColor: MainColor.white,
|
||||
// },
|
||||
// required: {
|
||||
// color: MainColor.red,
|
||||
// },
|
||||
}}
|
||||
withAsterisk
|
||||
label="Bidang Bisnis"
|
||||
@@ -114,17 +115,18 @@ export default function CreatePortofolio({
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
}
|
||||
// input: {
|
||||
// backgroundColor: MainColor.white,
|
||||
// },
|
||||
// required: {
|
||||
// color: MainColor.red,
|
||||
// },
|
||||
}}
|
||||
withAsterisk
|
||||
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={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
}
|
||||
// input: {
|
||||
// backgroundColor: MainColor.white,
|
||||
// },
|
||||
// required: {
|
||||
// color: MainColor.red,
|
||||
// },
|
||||
}}
|
||||
withAsterisk
|
||||
label="Nomor Telepon "
|
||||
@@ -159,19 +184,20 @@ export default function CreatePortofolio({
|
||||
tlpn: val.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
/> */}
|
||||
|
||||
<Stack spacing={5}>
|
||||
<Textarea
|
||||
styles={{
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
},
|
||||
required: {
|
||||
color: MainColor.red,
|
||||
}
|
||||
// input: {
|
||||
// backgroundColor: MainColor.white,
|
||||
// },
|
||||
// required: {
|
||||
// color: MainColor.red,
|
||||
// },
|
||||
}}
|
||||
maxLength={300}
|
||||
autosize
|
||||
@@ -208,7 +234,9 @@ export default function CreatePortofolio({
|
||||
</AspectRatio>
|
||||
) : (
|
||||
<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">
|
||||
Masukan logo bisnis anda untuk ditampilkan dalam portofolio
|
||||
</Text>
|
||||
@@ -308,9 +336,9 @@ export default function CreatePortofolio({
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
}
|
||||
// input: {
|
||||
// backgroundColor: MainColor.white,
|
||||
// },
|
||||
}}
|
||||
label="Facebook"
|
||||
maxLength={100}
|
||||
@@ -327,9 +355,9 @@ export default function CreatePortofolio({
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
}
|
||||
// input: {
|
||||
// backgroundColor: MainColor.white,
|
||||
// },
|
||||
}}
|
||||
label="Instagram"
|
||||
maxLength={100}
|
||||
@@ -346,9 +374,9 @@ export default function CreatePortofolio({
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
}
|
||||
// input: {
|
||||
// backgroundColor: MainColor.white,
|
||||
// },
|
||||
}}
|
||||
label="Tiktok"
|
||||
maxLength={100}
|
||||
@@ -365,9 +393,9 @@ export default function CreatePortofolio({
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
}
|
||||
// input: {
|
||||
// backgroundColor: MainColor.white,
|
||||
// },
|
||||
}}
|
||||
label="Twitter"
|
||||
maxLength={100}
|
||||
@@ -384,9 +412,9 @@ export default function CreatePortofolio({
|
||||
label: {
|
||||
color: MainColor.white,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: MainColor.white
|
||||
}
|
||||
// input: {
|
||||
// backgroundColor: MainColor.white,
|
||||
// },
|
||||
}}
|
||||
label="Youtube"
|
||||
maxLength={100}
|
||||
|
||||
@@ -1,131 +1,186 @@
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
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 { 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 { useState } from "react";
|
||||
import { apiGetOnePortofolioById } from "../lib/api_portofolio";
|
||||
import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
|
||||
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() {
|
||||
const [loading, setLoading] = useState(true)
|
||||
const param = useParams<{ id: string }>()
|
||||
const [dataPorto, setDataPorto] = useState<IDetailPortofolioBisnis>();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const param = useParams<{ id: string }>();
|
||||
const [dataPorto, setDataPorto] = useState<IDetailPortofolioBisnis>();
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
|
||||
async function funGetPortofolio() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiGetOnePortofolioById(param.id, "bisnis");
|
||||
if (response.success) {
|
||||
setDataPorto(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
async function funGetPortofolio() {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await apiGetOnePortofolioById(param.id, "bisnis");
|
||||
if (response.success) {
|
||||
setDataPorto(response.data);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
funGetPortofolio()
|
||||
}, []);
|
||||
useShallowEffect(() => {
|
||||
funGetPortofolio();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper
|
||||
p={"sm"}
|
||||
style={{
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px ",
|
||||
padding: "15px",
|
||||
color: MainColor.white,
|
||||
}}
|
||||
>
|
||||
{
|
||||
loading ?
|
||||
<SkeletonDetailBisnis />
|
||||
:
|
||||
<Stack>
|
||||
<Group position="apart">
|
||||
<Title order={6}>Data Bisnis</Title>
|
||||
<Text color={MainColor.yellow} fw={"bold"}>
|
||||
id: {" "}
|
||||
<Text span inherit>
|
||||
#{dataPorto?.id_Portofolio}
|
||||
</Text>
|
||||
</Text>
|
||||
</Group>
|
||||
<Stack>
|
||||
<SimpleGrid
|
||||
cols={2}
|
||||
spacing={"md"}
|
||||
breakpoints={[
|
||||
{ maxWidth: "62rem", cols: 2, spacing: "md" },
|
||||
{ maxWidth: "48rem", cols: 1, spacing: "sm" },
|
||||
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
|
||||
]}
|
||||
>
|
||||
<Box>
|
||||
<Paper>
|
||||
<ComponentGlobal_LoadImage fileId={String(dataPorto?.logoId)} />
|
||||
</Paper>
|
||||
</Box>
|
||||
return (
|
||||
<>
|
||||
<Paper
|
||||
p={"sm"}
|
||||
style={{
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px ",
|
||||
padding: "15px",
|
||||
color: MainColor.white,
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<SkeletonDetailBisnis />
|
||||
) : (
|
||||
<Stack>
|
||||
<Group position="apart">
|
||||
<Title order={6}>Data Bisnis</Title>
|
||||
<Text color={MainColor.yellow} fw={"bold"}>
|
||||
id: {" "}
|
||||
<Text span inherit>
|
||||
#{dataPorto?.id_Portofolio}
|
||||
</Text>
|
||||
</Text>
|
||||
</Group>
|
||||
<Stack>
|
||||
<SimpleGrid
|
||||
cols={2}
|
||||
spacing={"md"}
|
||||
breakpoints={[
|
||||
{ maxWidth: "62rem", cols: 2, spacing: "md" },
|
||||
{ maxWidth: "48rem", cols: 1, spacing: "sm" },
|
||||
{ maxWidth: "36rem", cols: 1, spacing: "sm" },
|
||||
]}
|
||||
>
|
||||
<Box>
|
||||
<Paper>
|
||||
<ComponentGlobal_LoadImage
|
||||
fileId={String(dataPorto?.logoId)}
|
||||
/>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconBuildingSkyscraper />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{dataPorto?.namaBisnis}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconListDetails />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{dataPorto?.bidangBisnis}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconPhoneCall />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{dataPorto?.tlpn}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconMapPin />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{dataPorto?.alamatKantor}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
<Box>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconBuildingSkyscraper />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{dataPorto?.namaBisnis}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconListDetails />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{dataPorto?.bidangBisnis}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconPhoneCall />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text
|
||||
onClick={() => {
|
||||
setOpenModal(true);
|
||||
}}
|
||||
>
|
||||
+ {dataPorto?.tlpn}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<IconMapPin />
|
||||
</Grid.Col>
|
||||
<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}>
|
||||
<Group spacing={"xs"}>
|
||||
<IconPinned />
|
||||
<Text fz={"sm"} fw={"bold"}>
|
||||
Tentang Kami
|
||||
</Text>
|
||||
</Group>
|
||||
<Text px={"sm"}>{dataPorto?.deskripsi}</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
}
|
||||
<Stack spacing={5}>
|
||||
<Group spacing={"xs"}>
|
||||
<IconPinned />
|
||||
<Text fz={"sm"} fw={"bold"}>
|
||||
Tentang Kami
|
||||
</Text>
|
||||
</Group>
|
||||
<Text px={"sm"}>{dataPorto?.deskripsi}</Text>
|
||||
</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>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,131 +1,193 @@
|
||||
import { AccentColor, MainColor } from "@/app_modules/_global/color";
|
||||
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 { 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 { 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 { UIGlobal_Modal } from "@/app_modules/_global/ui";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function ProfileDetail() {
|
||||
const param = useParams<{ id: string }>()
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [dataProfile, setDataProfile] = useState<IUserProfile>()
|
||||
const listInformation = [
|
||||
{
|
||||
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 param = useParams<{ id: string }>();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [dataProfile, setDataProfile] = useState<IUserProfile>();
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
|
||||
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() {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await apiGetUserProfile(`?profile=${param.id}`)
|
||||
if (response.success) {
|
||||
setDataProfile(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false)
|
||||
async function getProfile() {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await apiGetUserProfile(`?profile=${param.id}`);
|
||||
if (response.success) {
|
||||
setDataProfile(response.data);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
getProfile();
|
||||
}, []);
|
||||
|
||||
useShallowEffect(() => {
|
||||
getProfile()
|
||||
}, []);
|
||||
|
||||
return <>
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
spacing={0}
|
||||
style={{
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px ",
|
||||
padding: "15px",
|
||||
color: MainColor.white
|
||||
}}
|
||||
spacing={0}
|
||||
style={{
|
||||
backgroundColor: AccentColor.darkblue,
|
||||
border: `2px solid ${AccentColor.blue}`,
|
||||
borderRadius: "10px ",
|
||||
padding: "15px",
|
||||
color: MainColor.white,
|
||||
}}
|
||||
>
|
||||
{
|
||||
loading ?
|
||||
<SkeletonProfile /> :
|
||||
<>
|
||||
<Box>
|
||||
<Profile_ComponentLoadBackgroundImage
|
||||
fileId={dataProfile?.imageBackgroundId as any}
|
||||
size={500}
|
||||
/>
|
||||
{loading ? (
|
||||
<SkeletonProfile />
|
||||
) : (
|
||||
<>
|
||||
<Box>
|
||||
<Profile_ComponentLoadBackgroundImage
|
||||
fileId={dataProfile?.imageBackgroundId as any}
|
||||
size={500}
|
||||
/>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
bottom: 60,
|
||||
margin: "auto",
|
||||
width: "100%",
|
||||
marginBottom: -30,
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<Profile_ComponentAvatarProfile
|
||||
fileId={dataProfile?.imageId as any}
|
||||
style={{
|
||||
borderStyle: "solid",
|
||||
borderColor: AccentColor.darkblue,
|
||||
borderWidth: "2px",
|
||||
}}
|
||||
/>
|
||||
</Center>
|
||||
<Stack align="center" c={MainColor.white} mt={"xs"} spacing={0}>
|
||||
<Text fw={"bold"} lineClamp={1} c={MainColor.white}>
|
||||
{dataProfile?.name}
|
||||
</Text>
|
||||
<Text fs={"italic"} fz={"sm"} c={MainColor.white} lineClamp={1}>
|
||||
@{dataProfile?.username}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack spacing={"xs"}>
|
||||
{listInformation.map((e, i) => (
|
||||
<Group key={i} align="flex-start">
|
||||
<ThemeIcon
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
{e.icon}
|
||||
</ThemeIcon>
|
||||
<Box w={"85%"}>
|
||||
<Text c={MainColor.white} fw={"bold"}>{e?.value}</Text>
|
||||
</Box>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</>
|
||||
}
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
bottom: 60,
|
||||
margin: "auto",
|
||||
width: "100%",
|
||||
marginBottom: -30,
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<Profile_ComponentAvatarProfile
|
||||
fileId={dataProfile?.imageId as any}
|
||||
style={{
|
||||
borderStyle: "solid",
|
||||
borderColor: AccentColor.darkblue,
|
||||
borderWidth: "2px",
|
||||
}}
|
||||
/>
|
||||
</Center>
|
||||
<Stack align="center" c={MainColor.white} mt={"xs"} spacing={0}>
|
||||
<Text fw={"bold"} lineClamp={1} c={MainColor.white}>
|
||||
{dataProfile?.name}
|
||||
</Text>
|
||||
<Text
|
||||
fs={"italic"}
|
||||
fz={"sm"}
|
||||
c={MainColor.white}
|
||||
lineClamp={1}
|
||||
>
|
||||
@{dataProfile?.username}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack spacing={"xs"}>
|
||||
{listInformation.map((e, i) => (
|
||||
<Group key={i} align="flex-start">
|
||||
<ThemeIcon
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
{e.icon}
|
||||
</ThemeIcon>
|
||||
<Box w={"85%"}>
|
||||
<Text c={MainColor.white} fw={"bold"}>
|
||||
{e?.value}
|
||||
</Text>
|
||||
</Box>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</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>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,6 +18,8 @@ import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
|
||||
import { MODEL_MAP } from "../lib/interface";
|
||||
import { ComponentMap_LoadImageMap } from "./comp_load_image_map";
|
||||
import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
|
||||
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
|
||||
import Link from "next/link";
|
||||
|
||||
export function ComponentMap_DetailData({
|
||||
mapId,
|
||||
@@ -30,6 +32,7 @@ export function ComponentMap_DetailData({
|
||||
const [data, setData] = useState<MODEL_MAP>();
|
||||
const [dataUser, setDataUser] = useState<MODEL_USER>();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [openModal, setOpenModal] = useState(false);
|
||||
|
||||
useShallowEffect(() => {
|
||||
onLoadData(setData, setDataUser);
|
||||
@@ -46,9 +49,7 @@ export function ComponentMap_DetailData({
|
||||
return (
|
||||
<>
|
||||
<Stack mt={"lg"} spacing={"xl"} px={"md"}>
|
||||
<ComponentGlobal_AvatarAndUsername
|
||||
profile={dataUser?.Profile as any}
|
||||
/>
|
||||
<ComponentGlobal_AvatarAndUsername profile={dataUser?.Profile as any} />
|
||||
|
||||
<ComponentMap_LoadImageMap fileId={data.imageId} />
|
||||
|
||||
@@ -74,7 +75,13 @@ export function ComponentMap_DetailData({
|
||||
<IconPhoneCall />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={"auto"}>
|
||||
<Text>{data?.Portofolio.tlpn}</Text>
|
||||
<Text
|
||||
onClick={() => {
|
||||
setOpenModal(true);
|
||||
}}
|
||||
>
|
||||
+ {data?.Portofolio.tlpn}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
<Grid>
|
||||
@@ -127,6 +134,36 @@ export function ComponentMap_DetailData({
|
||||
</Button>
|
||||
</Group>
|
||||
</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>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user