Added real data to agent section in details page, finished floating whatsapp widget

This commit is contained in:
Franklin 2023-04-14 10:38:11 -04:00
parent 1dfcec0247
commit 5b55a20afa
4 changed files with 27 additions and 9 deletions

View File

@ -24,3 +24,4 @@
- [x] Finish agents screen
- [ ] Finish Contact us screen
- [ ] Link agent info with details screen, remove hardcoded pic and details
- [ ] Whatsapp button should direct to agent's phone number wa.me link

View File

@ -10,6 +10,7 @@
background-color: #25D366;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-size: 45px;
text-decoration: none;
}
.floating-widget-container:hover {

View File

@ -1,18 +1,23 @@
use uuid::Uuid;
use yew::prelude::*;
//TODO: Finish, add whatsapp link or email link?
#[function_component(FloatingWidget)]
pub fn floating_widget(_props: &FloatingWidgetProps) -> Html {
pub fn floating_widget(props: &FloatingWidgetProps) -> Html {
let message = format!("Buenas, me interesa conocer mas sobre esta propiedad: %0A https://proyectosenconstruccion.com/details/{}", props.project_id);
let number = format!("1{}", props.phone_number);
let wa_me_url = format!("https://wa.me/{number}/?text={message}");
html! {
<div class={"floating-widget-container"}>
<a class={"floating-widget-container"} href={wa_me_url}>
<div class={"floating-widget-logo"}>
<i class="fa-brands fa-whatsapp"></i>
</div>
</div>
</a>
}
}
#[derive(Properties, PartialEq)]
pub struct FloatingWidgetProps {
pub project_id: Uuid,
pub phone_number: String,
}

View File

@ -54,7 +54,7 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
html!{
<>
<NavigationBar/>
<FloatingWidget/>
<FloatingWidget phone_number={listing.agent.credential.clone()} project_id={listing.project.id}/>
<div class={"page-container"}>
{
if *finished_loading {
@ -67,11 +67,13 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
// Agent
<div class={"details-head-agent-container"}>
// Profile pic
<img class={"details-head-agent-profile-picture"} src={"https://a0.muscache.com/im/pictures/user/b3bc8258-30a6-4e62-b971-3abaeb37159b.jpg"} alt={"agent_pfp"}/>
<img class={"details-head-agent-profile-picture"} src={listing.agent.profile_picture_url} alt={"agent_pfp"}/>
<div class={"details-head-agent-text-container"}>
<div class={"details-head-agent-heading"}>{"Vendido por Luis Jose"}</div>
<div class={"details-head-agent-subheading"}>{"(809)-123-4567"}</div>
<div class={"details-head-agent-heading"}>{listing.agent.full_name}</div>
<div class={"details-head-agent-subheading"}>{
format_phone_number(&listing.agent.credential)
}</div>
</div>
</div>
@ -221,6 +223,15 @@ pub struct DetailsPageProps {
pub project_id: Uuid
}
pub fn format_phone_number<'a>(phone_number: &'a String) -> String {
if phone_number.len() <= 11 && phone_number.len() >= 10 {
let (first_part, after_first) = phone_number.split_at(3);
let (second_part, last_part) = after_first.split_at(3);
format!("({})-{}-{}", first_part, second_part, last_part)
} else {
phone_number.clone()
}
}
pub fn create_unit_selection_menu(units: &Vec<&Unit>, selected_unit_handle: UseStateHandle<usize>) -> Html {