Skip to content

Commit

Permalink
Added CompanySubmissionPopover
Browse files Browse the repository at this point in the history
  • Loading branch information
AmiyaSX committed May 6, 2024
1 parent e8e0854 commit b892a2f
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 4 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
Expand Down
38 changes: 38 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

124 changes: 124 additions & 0 deletions src/app/exhibitor/_components/CompanySubmissionPopover.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
"use client"
import { Button } from "@/components/ui/button"
import * as Popover from "@radix-ui/react-popover"
import axios from "axios"
import { NavigationIcon, X } from "lucide-react"
import { useState } from "react"

export function CompanySubmissionPopover() {
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [company, setCompany] = useState("")
const [question, setQuestion] = useState("")

const sendMessage = () => {
const message = {
text: `
*Name:* ${name}
*Email:* ${email}
*Company:* ${company}
*Question:* ${question}
`
}
axios
.post("https://slack.com/api/chat.postMessage", message, {
headers: {
"Content-Type": "application/json",
Authorization:
"xoxe.xoxp-1-Mi0yLTY5MTAzOTUwMDgxMzAtNjk1OTQwNDEwOTAyOC03MDg4NjY5OTc2MDY1LTcwNzU4ODkyNTA0MzUtYmI3Y2UyNDFjZmVkNDlhMzkxNzcwYjIwMGNkNTY3NmVkODU1ZDBkYTlmYzUxMTIyYTk0MmNkZGNhNGU2MWFkMA"
}
})
.then(response => {
console.log("Message sent successfully:", response.data)
// Reset form fields
setName("")
setEmail("")
setCompany("")
setQuestion("")
})
.catch(error => {
console.error("Error sending message:", error)
})
}

return (
<div className="fixed bottom-0 mb-6 ml-auto mr-auto md:left-0 md:m-8 md:mx-auto md:ml-16">
<Popover.Root>
<Popover.Trigger>
<Button className="md:mb-6 md:mr-8 md:mt-6">
<NavigationIcon className="mr-1" />
Leave a Contact
</Button>
</Popover.Trigger>
<Popover.Content side="top" side-offset="5">
<div className=" rounded-lg p-4 shadow-md filter dark:bg-liqorice-700">
<div className="flex flex-col gap-2 p-2">
<p className="text-l font-semibold">Contact</p>
<fieldset className="flex flex-col">
<label className="text-sm" htmlFor="name">
Name
</label>
<input
className="rounded-md border px-2 py-1"
id="name"
defaultValue=""
onChange={e => setName(e.target.value)}
placeholder="Your name"
/>
</fieldset>
<fieldset className="flex flex-col">
<label className="text-sm" htmlFor="email">
Email
</label>
<input
className="rounded-md border px-2 py-1"
id="email"
defaultValue=""
onChange={e => setEmail(e.target.value)}
placeholder="Your email"
/>
</fieldset>
<fieldset className="flex flex-col">
<label className="text-sm" htmlFor="company">
Company
</label>
<input
className="rounded-md border px-2 py-1"
id="company"
defaultValue=""
onChange={e => setCompany(e.target.value)}
placeholder="Your company"
/>
</fieldset>
<fieldset className="flex flex-col">
<label className="text-sm" htmlFor="question">
Question
</label>
<textarea
className="rounded-md border px-2 py-1"
id="question"
onChange={e => setQuestion(e.target.value)}
placeholder="Enter your question"
rows={5}
/>
</fieldset>
<div className="flex justify-end">
<Popover.Close>
<Button className="mt-4" onClick={sendMessage}>
Connect
</Button>
</Popover.Close>
</div>
<Popover.PopoverClose
className="absolute right-[5px] top-[8px] hover:cursor-pointer"
aria-label="Close">
<X />
</Popover.PopoverClose>
<Popover.PopoverArrow className="fill-white" />
</div>
</div>
</Popover.Content>
</Popover.Root>
</div>
)
}
10 changes: 6 additions & 4 deletions src/app/exhibitor/packages/page.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { CompanySubmissionPopover } from "@/app/exhibitor/_components/CompanySubmissionPopover"
import { Page } from "@/components/shared/Page"
import { fetchDates } from "@/components/shared/hooks/api/useDates"
import {
AccordionItem,
Accordion,
AccordionContent,
AccordionTrigger,
Accordion
AccordionItem,
AccordionTrigger
} from "@/components/ui/accordion"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
Expand Down Expand Up @@ -132,7 +133,7 @@ export default async function Packages() {
</div>
<p className="mt-4 text-sm">*All prices are ex. VAT. </p>
<div className="mx-auto mt-10 w-full max-w-[600px]">
<h1 className="ml-2 mb-2 text-2xl">FAQ</h1>
<h1 className="mb-2 ml-2 text-2xl">FAQ</h1>
<Accordion type="single" collapsible={true}>
<FAQItem title='What does "priority placement" mean?'>
Priority placement means that we will place you in spots on the
Expand Down Expand Up @@ -175,6 +176,7 @@ export default async function Packages() {
</FAQItem>
</Accordion>
</div>
<CompanySubmissionPopover />
</Page.Boundary>
</Page.Background>
)
Expand Down
2 changes: 2 additions & 0 deletions src/app/exhibitor/page.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { PhotoSlideCarousel } from "@/app/_components/PhotoSlideCarousel"
import { CompanySubmissionPopover } from "@/app/exhibitor/_components/CompanySubmissionPopover"
import { CurrentStatus } from "@/app/exhibitor/_components/CurrentStatus"
import { Page } from "@/components/shared/Page"
import { Button } from "@/components/ui/button"
Expand Down Expand Up @@ -125,6 +126,7 @@ export default function ForExhibitorsPage() {
</div>
</section>
<PhotoSlideCarousel photoSrc={promotionalPhotos} />
<CompanySubmissionPopover />
</Page.Boundary>
</Page.Background>
)
Expand Down
2 changes: 2 additions & 0 deletions src/app/exhibitor/timeline/page.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { CompanySubmissionPopover } from "@/app/exhibitor/_components/CompanySubmissionPopover"
import { ExhibitorTimeline } from "@/app/exhibitor/_components/ExhibitorTimeline"
import { Page } from "@/components/shared/Page"
import { Metadata } from "next"
Expand All @@ -22,6 +23,7 @@ export default async function WhyArmadaPage() {
</p>
<ExhibitorTimeline />
<div className="h-5" />
<CompanySubmissionPopover />
</Page.Boundary>
</Page.Background>
)
Expand Down

0 comments on commit b892a2f

Please sign in to comment.